/* Premium client dashboard */
.client-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.86); border-bottom: 1px solid rgba(229,231,235,.85); backdrop-filter: blur(18px); }
.client-header-inner { width: min(1400px, calc(100% - 48px)); min-height: 76px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.client-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.client-brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #fff; background: linear-gradient(145deg,#2563eb,#1d4ed8); box-shadow: 0 8px 18px rgba(37,99,235,.24); font-weight: 800; }
.client-brand > span:last-child { display: grid; line-height: 1.1; }
.client-brand strong { font-size: 16px; letter-spacing: -.02em; }
.client-brand small,.client-user-copy small { color: var(--client-muted); font-size: 11px; margin-top: 3px; }
.client-header-actions,.client-user { display: flex; align-items: center; gap: 10px; }
.icon-button { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--client-border); background: var(--client-card); color: var(--client-muted); cursor: pointer; transition: var(--client-transition); }
.icon-button:hover { color: var(--client-primary); border-color: #bfdbfe; background: #eff6ff; transform: translateY(-1px); }
.icon-button i { font-size: 20px; }
.client-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg,#dbeafe,#bfdbfe); color: #1d4ed8; font-weight: 750; }
.client-user-copy { display: grid; line-height: 1.1; }
.client-user-copy strong { font-size: 13px; }
.logout-form { margin: 0; }

.page-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; padding: 0; background: transparent; border: 0; }
.page-bar h2 { margin: 0 !important; font-size: clamp(25px,3vw,34px); letter-spacing: -.04em; color: var(--client-text); }
.page-bar .hint { margin: 8px 0 0; font-size: 14px; }
.client-vue-select { min-height: 44px; padding: 0 42px 0 14px; border: 1px solid var(--client-border); border-radius: 12px; background: var(--client-card); color: var(--client-text); box-shadow: var(--client-shadow); }

.client-tabs { position: sticky; top: 92px; z-index: 40; display: flex; gap: 6px; width: max-content; max-width: 100%; margin: 0 0 24px; padding: 6px; overflow-x: auto; border: 1px solid rgba(229,231,235,.9); border-radius: 16px; background: rgba(255,255,255,.82); box-shadow: 0 8px 25px rgba(15,23,42,.04); backdrop-filter: blur(14px); scrollbar-width: none; }
.client-tabs::-webkit-scrollbar { display: none; }
.client-tab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 15px; border: 0; border-radius: 11px; background: transparent; color: var(--client-muted); font-weight: 650; white-space: nowrap; cursor: pointer; transition: var(--client-transition); }
.client-tab-btn:hover { background: #f1f5f9; color: var(--client-text); }
.client-tab-btn.active { color: #fff; background: linear-gradient(135deg,#2563eb,#3b82f6); box-shadow: 0 7px 16px rgba(37,99,235,.2); }
.client-tab-btn i { font-size: 18px; }
.client-tab-count { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.22); color: inherit; font-size: 11px; }
.client-tab-panel { display: none; }
.client-tab-panel.active { display: block; animation: panelIn .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.grid-kpi { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.kpi { position: relative; min-height: 142px; padding: 22px; overflow: hidden; border: 1px solid var(--client-border); border-left: 1px solid var(--client-border); border-radius: var(--client-radius); background: var(--client-card) !important; box-shadow: var(--client-shadow); cursor: default; transition: transform var(--client-transition),box-shadow var(--client-transition),border-color var(--client-transition); }
.kpi::after { content: ""; position: absolute; width: 110px; height: 110px; right: -46px; bottom: -55px; border-radius: 50%; background: currentColor; opacity: .055; }
.kpi:hover { transform: translateY(-4px); box-shadow: var(--client-shadow-hover); border-color: #dbe3ef; }
.kpi .kv { margin-top: 30px; color: var(--client-text) !important; font-size: clamp(26px,3vw,34px); font-weight: 800; letter-spacing: -.04em; }
.kpi .kl { color: var(--client-muted); font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.kpi .kpi-icon { position: absolute; top: 18px; left: 20px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: currentColor; }
.kpi .kpi-icon i { color: #fff; font-size: 18px; }
.kpi.k-bleu { color: var(--client-primary); }
.kpi.k-ok { color: var(--client-success); }
.kpi.k-warn { color: var(--client-warning); }
.kpi.k-rouge { color: var(--client-danger); }
.client-invoice-totals { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 22px; }
.client-invoice-totals .kpi { min-height: 118px; }

.card { margin-bottom: 22px; padding: 24px; border: 1px solid var(--client-border); border-radius: var(--client-radius); background: var(--client-card); box-shadow: var(--client-shadow); }
.card > h2:first-child { padding-left: 0; color: var(--client-text); font-size: 18px; letter-spacing: -.02em; }
.card > h2:first-child::before { display: none; }
.table-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.table-card-head h2 { margin: 0; color: var(--client-text); font-size: 18px; letter-spacing: -.02em; }
.client-notification-card { background: linear-gradient(135deg,rgba(239,246,255,.8),var(--client-card) 48%); border-color: #dbeafe; }
.notification-empty { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: #f0fdf4; color: #15803d; font-size: 14px; }
.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 4px 9px; border: 0; border-radius: 999px; font-weight: 700; line-height: 1.2; }
.b-ok { color: #15803d; background: #dcfce7; }
.b-warn,.b-low { color: #b45309; background: #fef3c7; }
.b-out { color: #b91c1c; background: #fee2e2; }
.b-blue { color: #1d4ed8; background: #dbeafe; }

.client-table-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 12px; }
.client-search { position: relative; width: min(320px,100%); }
.client-search i { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); color: var(--client-muted); }
.client-search input { width: 100%; height: 42px; padding: 0 14px 0 40px; border: 1px solid var(--client-border); border-radius: 12px; background: var(--client-card); color: var(--client-text); }
.client-search input:focus { border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(37,99,235,.1); outline: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--client-border); border-radius: 14px; }
.t-cards { width: 100%; border-collapse: collapse; }
.t-cards thead { background: #f8fafc; }
.t-cards th { padding: 13px 15px; color: var(--client-muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--client-border); white-space: nowrap; cursor: pointer; }
.t-cards td { padding: 15px; border-bottom: 1px solid var(--client-border); color: var(--client-text); font-size: 13px; }
.t-cards tbody tr { transition: background var(--client-transition); }
.t-cards tbody tr:hover { background: #f8fafc; }
.t-cards tbody tr:last-child td { border-bottom: 0; }
.client-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.client-pagination button { min-width: 36px; height: 36px; border: 1px solid var(--client-border); border-radius: 10px; background: var(--client-card); color: var(--client-text); cursor: pointer; }
.client-pagination button.active { border-color: var(--client-primary); background: var(--client-primary); color: #fff; }

.field { margin-top: 18px; }
.field label { display: block; margin-bottom: 8px; color: var(--client-text); font-size: 13px; font-weight: 650; }
.field input,.field textarea { width: 100%; border: 1px solid var(--client-border); border-radius: 12px; background: var(--client-card); color: var(--client-text); transition: border-color var(--client-transition),box-shadow var(--client-transition); }
.field input { min-height: 46px; padding: 0 14px; }
.field textarea { min-height: 150px; padding: 13px 14px; resize: vertical; }
.field input:focus,.field textarea:focus { border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(37,99,235,.1); outline: 0; }
.field input::placeholder,.field textarea::placeholder { color: #9ca3af; }
.field-optional { margin-left: 7px; color: var(--client-muted); font-size: 11px; font-weight: 500; }
.client-upload-zone { position: relative; display: flex; align-items: center; gap: 15px; min-height: 108px; padding: 18px; border: 1.5px dashed #bfdbfe; border-radius: 14px; background: linear-gradient(135deg,#eff6ff 0%,#fff 72%); cursor: pointer; transition: border-color var(--client-transition),background var(--client-transition),transform var(--client-transition),box-shadow var(--client-transition); }
.client-upload-zone:hover,.client-upload-zone:focus-within,.client-upload-zone.is-dragging { border-color: #3b82f6; background: #eff6ff; box-shadow: 0 0 0 4px rgba(37,99,235,.08); transform: translateY(-1px); }
.client-upload-zone.has-files { border-style: solid; border-color: #86efac; background: #f0fdf4; }
.client-upload-zone.has-error { border-style: solid; border-color: #fca5a5; background: #fef2f2; }
.client-upload-zone input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.client-upload-icon { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 13px; background: #dbeafe; color: #2563eb; }
.client-upload-icon i { font-size: 24px; }
.client-upload-copy { display: grid; gap: 5px; min-width: 0; }
.client-upload-copy strong { color: var(--client-text); font-size: 14px; }
.client-upload-copy small { color: var(--client-muted); line-height: 1.45; }
.client-upload-summary { margin-top: 9px; color: var(--client-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.client-upload-summary.is-error { color: #b91c1c; font-weight: 650; }
.quote-request-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--client-border); }
.quote-request-actions > div { display: grid; gap: 3px; }
.quote-request-actions strong { color: var(--client-text); font-size: 13px; }
.quote-request-actions small { color: var(--client-muted); }
.attachment-list { display: grid; gap: 7px; min-width: 180px; }
.attachment-pill { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 6px; max-width: 290px; padding: 7px 9px; border: 1px solid #dbeafe; border-radius: 9px; background: #f8fbff; color: #1d4ed8; text-decoration: none; transition: border-color var(--client-transition),background var(--client-transition); }
.attachment-pill:hover { border-color: #93c5fd; background: #eff6ff; }
.attachment-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-pill small { color: var(--client-muted); white-space: nowrap; }

/* Dark authentication surface, visually merged with the page background. */
.login-box {
  border: 1px solid #263247;
  background: #111827 !important;
  color: #f8fafc !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.login-box h1 { color: #f8fafc !important; }
.login-box p.sub { color: #cbd5e1 !important; }
.login-box .field label {
  color: #cbd5e1 !important;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.login-box .field input,
.login-box .field textarea {
  border-color: #334155 !important;
  background: #0b1220 !important;
  color: #f8fafc !important;
  caret-color: #60a5fa;
}
.login-box .field input:hover,
.login-box .field textarea:hover { border-color: #64748b !important; }
.login-box .field input:focus,
.login-box .field textarea:focus {
  border-color: #60a5fa !important;
  background: #0f172a !important;
  box-shadow: 0 0 0 4px rgba(96,165,250,.16) !important;
}
.login-box .field input::placeholder,
.login-box .field textarea::placeholder { color: #94a3b8 !important; opacity: 1; }
.login-box > p:last-child {
  margin: 18px 0 0;
  color: #94a3b8 !important;
  text-align: center;
  font-size: 13px;
}
.login-box > p:last-child a {
  color: #93c5fd !important;
  font-weight: 650;
  text-decoration: none;
}
.login-box > p:last-child a:hover { color: #dbeafe !important; text-decoration: underline; }
.login-box input:-webkit-autofill {
  -webkit-text-fill-color: #f8fafc !important;
  -webkit-box-shadow: 0 0 0 1000px #0b1220 inset !important;
}
.client-toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; max-width: min(380px,calc(100vw - 32px)); padding: 14px 18px; border-radius: 12px; background: #111827; color: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.2); opacity: 0; transform: translateY(12px); pointer-events: none; transition: var(--client-transition); }
.client-toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) {
  .grid-kpi { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .client-header-inner { width: calc(100% - 28px); min-height: 68px; }
  .client-user-copy,.logout-form .btn span { display: none; }
  .logout-form .btn i { margin: 0; }
  .client-tabs { top: 78px; width: 100%; }
  .page-bar { align-items: stretch; flex-direction: column; }
  .client-vue-select { width: 100%; }
  .grid-kpi,.client-invoice-totals { grid-template-columns: 1fr; }
  .kpi { min-height: 124px; }
  .card { padding: 18px; }
  .table-card-head,.client-table-tools { align-items: stretch; flex-direction: column; }
  .client-export-actions { display: flex; gap: 8px; }
  .client-export-actions .btn { flex: 1; }
  .client-upload-zone { align-items: flex-start; min-height: 122px; }
  .quote-request-actions { align-items: stretch; flex-direction: column; }
  .quote-request-actions .btn { width: 100%; justify-content: center; }
  .table-wrap { margin: 0; padding: 0; overflow: visible; border: 0; }
  .t-cards,.t-cards tbody,.t-cards tr,.t-cards td { display: block; width: 100%; }
  .t-cards thead { display: none; }
  .t-cards tbody { display: grid; gap: 12px; }
  .t-cards tbody tr { padding: 8px 14px; border: 1px solid var(--client-border); border-radius: 14px; background: var(--client-card); box-shadow: 0 5px 18px rgba(15,23,42,.04); }
  .t-cards td { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px dashed var(--client-border); text-align: right !important; }
  .t-cards td:last-child { border: 0; }
  .t-cards td::before { content: attr(data-l); flex: 0 0 40%; color: var(--client-muted); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .t-cards td:first-child::before { content: "Numéro"; }
  .quote-requests-table td:first-child::before { content: "Objet"; }
  .t-cards td[colspan] { display: block; text-align: left !important; }
  .t-cards td[colspan]::before { display: none; }
}
@media (prefers-color-scheme: dark) {
  .client-header,.client-tabs { background: rgba(17,24,39,.86); border-color: var(--client-border); }
  .client-tab-btn:hover,.t-cards tbody tr:hover,.t-cards thead { background: #172033; }
  .client-notification-card { background: linear-gradient(135deg,rgba(30,58,138,.18),var(--client-card) 48%); border-color: #263d6d; }
  .notification-empty { background: rgba(22,163,74,.12); color: #86efac; }
  .client-avatar { background: #1e3a8a; color: #bfdbfe; }
  .kpi,.card,.t-cards tbody tr { background: var(--client-card) !important; }
  .b-ok { color: #86efac; background: rgba(22,163,74,.18); }
  .b-warn,.b-low { color: #fcd34d; background: rgba(245,158,11,.17); }
  .b-out { color: #fca5a5; background: rgba(220,38,38,.18); }
  .b-blue { color: #93c5fd; background: rgba(37,99,235,.19); }
  .client-upload-zone { border-color: #334155; background: #111827; }
  .client-upload-zone:hover,.client-upload-zone:focus-within,.client-upload-zone.is-dragging { border-color: #60a5fa; background: #172033; }
  .client-upload-zone.has-files { border-color: #166534; background: rgba(22,101,52,.18); }
  .client-upload-zone.has-error { border-color: #991b1b; background: rgba(153,27,27,.16); }
  .attachment-pill { border-color: #263d6d; background: rgba(30,58,138,.18); color: #93c5fd; }
}

/* ==========================================================================
   v2.51.1 — Correctif : ligne illisible au survol dans l'espace client
   app.css (thème administration, chargé avant) applique un fond clair aux
   cellules au survol (tr:hover td). En thème sombre, le texte blanc devenait
   invisible sur ce fond clair. On neutralise l'héritage cellule par cellule
   et on gère le survol uniquement au niveau de la ligne.
   ========================================================================== */
.client-app tr:hover td { background: transparent; }
.client-app .t-cards tbody tr:hover { background: #eef4ff; }
.client-app .t-cards tbody tr:hover td { background: transparent; }
@media (prefers-color-scheme: dark) {
  .client-app tr:hover td,
  .client-app .t-cards tbody tr:hover td { background: transparent !important; }
  .client-app .t-cards tbody tr:hover { background: #172033 !important; }
  /* v2.62.6 — texte en blanc sur la ligne survolee (barre de selection) */
  .client-app .t-cards tbody tr:hover td,
  .client-app .t-cards tbody tr:hover td strong,
  .client-app .t-cards tbody tr:hover td small,
  .client-app .t-cards tbody tr:hover td .hint { color: #f8fafc !important; }
}

/* ==========================================================================
   v2.52.0 — Bouton flottant « Demander un devis » + fenêtre contextuelle
   ========================================================================== */
.client-fab {
  position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 120;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--client-primary), #3b82f6); color: #fff;
  box-shadow: 0 10px 26px rgba(37, 99, 235, .42);
  transition: transform var(--client-transition), box-shadow var(--client-transition);
}
.client-fab i { font-size: 27px; margin: 0; }
.client-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 32px rgba(37, 99, 235, .5); }
.client-fab:active { transform: scale(.96); }
body.modal-ouvert .client-fab { display: none; }

/* ---- Fenêtre contextuelle au thème de l'espace client ---- */
.client-modal-box { width: min(680px, calc(100vw - 24px)); background: var(--client-card); }
.client-modal-box > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.client-modal-head {
  background: linear-gradient(135deg, var(--client-primary), #3b82f6);
  border-bottom: 0; border-radius: 14px 14px 0 0;
}
.client-modal-head h3 { color: #fff; display: flex; align-items: center; gap: 9px; }
.client-modal-head h3 i { font-size: 20px; }
.client-modal .field { margin-top: 14px; }
.client-modal-foot { background: transparent; border-top: 1px solid var(--client-border); }
.client-modal-note { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.client-modal-note strong { color: var(--client-text); font-size: 13.5px; }
.client-modal-note small { color: var(--client-muted); font-size: 12px; }
.client-demande-vide { text-align: center; padding: 34px 20px; }
.client-demande-vide .btn { margin-top: 10px; }

@media (max-width: 640px) {
  .client-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 56px; height: 56px; }
  .client-modal-note { min-width: 100%; }
}
@media (prefers-color-scheme: dark) {
  .client-modal-box { background: var(--client-card); color: var(--client-text); }
  .client-modal .modal-body { color: var(--client-text); }
  .client-modal .modal-foot { background: transparent; border-top-color: var(--client-border); }
}

/* ---- v2.54.0 : sélecteur d'entreprise (comptes multi-entreprises) ---- */
.client-entreprise-form { display: flex; align-items: center; gap: 8px; }
.client-entreprise-label { font-size: 12px; font-weight: 700; color: var(--client-muted); white-space: nowrap; }
@media (max-width: 640px) {
  .client-entreprise-form { width: 100%; }
  .client-entreprise-form .client-vue-select { flex: 1 1 auto; }
}

/* ==========================================================================
   v2.54.1 — Gestion des couleurs : audit complet du portail client
   ========================================================================== */

/* 1) Les contrôles natifs (listes déroulantes, options, calendriers,
      ascenseurs) suivent le thème du système au lieu de rester blancs. */
body.client-app { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  body.client-app { color-scheme: dark; }
}

/* 2) Autofill Chrome/Safari : le remplissage automatique forçait un fond
      blanc (ou bleu clair) sous du texte clair → champ illisible.
      On couvre TOUS les états (repos, survol, focus, actif) en combinant
      l'anneau de focus et le remplissage intérieur dans le même box-shadow,
      car un box-shadow !important ultérieur remplaçait l'astuce inset. */
.client-app input:-webkit-autofill,
.client-app input:-webkit-autofill:hover,
.client-app input:-webkit-autofill:focus,
.client-app input:-webkit-autofill:active,
.client-app textarea:-webkit-autofill,
.client-app select:-webkit-autofill {
  -webkit-text-fill-color: var(--client-text) !important;
  caret-color: var(--client-text);
  -webkit-box-shadow: 0 0 0 1000px var(--client-card) inset !important;
  box-shadow: 0 0 0 1000px var(--client-card) inset !important;
  transition: background-color 99999s ease-out 0s;
}
.login-box input:-webkit-autofill,
.login-box input:-webkit-autofill:hover,
.login-box input:-webkit-autofill:active {
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #60a5fa;
  -webkit-box-shadow: 0 0 0 1000px #0b1220 inset !important;
  box-shadow: 0 0 0 1000px #0b1220 inset !important;
}
.login-box input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #60a5fa;
  border-color: #60a5fa !important;
  -webkit-box-shadow: 0 0 0 4px rgba(96, 165, 250, .16), 0 0 0 1000px #0f172a inset !important;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, .16), 0 0 0 1000px #0f172a inset !important;
}

/* 3) Sélection de texte : le surlignage par défaut (blanc translucide)
      rendait le texte clair invisible. */
.client-app ::selection { background: rgba(37, 99, 235, .9); color: #fff; }
.client-app input::selection,
.client-app textarea::selection { background: rgba(59, 130, 246, .55); color: #fff; }

/* 4) Filet de sécurité : tout champ du portail non couvert par .field
      reçoit les couleurs du thème (fond carte, texte, bordure). */
.client-app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.client-app select,
.client-app textarea {
  background-color: var(--client-card);
  color: var(--client-text);
  border-color: var(--client-border);
}
.client-app option { background: var(--client-card); color: var(--client-text); }

/* 5) Lien d'évitement : fond blanc + couleur héritée (blanche en sombre). */
.skip-link { color: #111827 !important; }

/* 6) Retouches mode sombre des composants restés clairs */
@media (prefers-color-scheme: dark) {
  .client-app .flash-ok   { background: rgba(22, 163, 74, .16);  color: #86efac; border-color: rgba(22, 163, 74, .38); }
  .client-app .flash-err  { background: rgba(220, 38, 38, .16);  color: #fca5a5; border-color: rgba(220, 38, 38, .38); }
  .client-app .flash-info { background: rgba(37, 99, 235, .16);  color: #93c5fd; border-color: rgba(37, 99, 235, .38); }
  .client-upload-summary.is-error { color: #fca5a5; }
  .client-upload-icon { background: rgba(37, 99, 235, .22); color: #93c5fd; }
  .client-profil-mdp { background: #172033; border-color: var(--client-border); }
  .client-profil-mdp > summary { color: var(--client-text); }
  .client-pagination button { background: var(--client-card); color: var(--client-text); border-color: var(--client-border); }
  .client-search input { background: var(--client-card); color: var(--client-text); }
}

/* ==========================================================================
   v2.55.0 — AUDIT COULEURS GLOBAL DE L'ESPACE CLIENT
   Problème de fond : app.css (thème administration, clair, chargé en premier)
   impose des surfaces #fff et des textes sombres à des éléments rendus dans
   le thème sombre du portail. Résultat : texte blanc sur fond clair, ou
   inversement. Cette section rend TOUTES les surfaces et TOUS les textes du
   portail dépendants des variables --client-*, quel que soit le thème.
   ========================================================================== */

/* 1. Les contrôles natifs (liste déroulante ouverte, barres de défilement,
      sélecteurs de date, cases à cocher) suivent le thème du système. */
body.client-app { color-scheme: light dark; }

/* 2. Champs de saisie : une seule source de vérité pour fond / texte / bordure. */
.client-app input,
.client-app select,
.client-app textarea {
  background: var(--client-card);
  color: var(--client-text);
  border: 1px solid var(--client-border);
  caret-color: var(--client-primary);
}
.client-app input::placeholder,
.client-app textarea::placeholder { color: var(--client-muted); opacity: 1; }
.client-app input:disabled,
.client-app select:disabled,
.client-app textarea:disabled { opacity: .62; cursor: not-allowed; }
/* Les options de liste déroulante ne sont pas héritées sur Windows/Chrome :
   sans couleur explicite, elles s'affichaient blanc sur blanc. */
.client-app select option,
.client-app select optgroup { background: var(--client-card); color: var(--client-text); }

/* 3. REMPLISSAGE AUTOMATIQUE (le bug du champ e-mail illisible).
      Chrome impose son propre fond clair et ignore `background`. Le seul
      levier est une ombre interne opaque + -webkit-text-fill-color. La règle
      :focus doit RÉÉCRIRE cette ombre en la conservant, sinon le fond clair
      réapparaît au moment de la saisie — c'était exactement le cas ici. */
.client-app input:-webkit-autofill,
.client-app input:-webkit-autofill:hover,
.client-app input:-webkit-autofill:active,
.client-app textarea:-webkit-autofill,
.client-app select:-webkit-autofill {
  -webkit-text-fill-color: var(--client-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--client-card) inset !important;
  box-shadow: 0 0 0 1000px var(--client-card) inset !important;
  caret-color: var(--client-text);
  transition: background-color 9999s ease-out 0s;   /* neutralise l'animation de fond de Chrome */
}
.client-app input:-webkit-autofill:focus,
.client-app textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--client-text) !important;
  /* masque opaque CONSERVÉ + halo de focus, dans la même déclaration */
  -webkit-box-shadow: 0 0 0 1000px var(--client-card) inset, 0 0 0 4px rgba(37,99,235,.16) !important;
  box-shadow: 0 0 0 1000px var(--client-card) inset, 0 0 0 4px rgba(37,99,235,.16) !important;
}

/* 4. Fenêtre de connexion / d'inscription : même traitement, fond dédié. */
.login-box input:-webkit-autofill,
.login-box input:-webkit-autofill:hover,
.login-box input:-webkit-autofill:active,
.login-box .field input:-webkit-autofill {
  -webkit-text-fill-color: #f8fafc !important;
  -webkit-box-shadow: 0 0 0 1000px #0b1220 inset !important;
  box-shadow: 0 0 0 1000px #0b1220 inset !important;
  caret-color: #60a5fa;
  transition: background-color 9999s ease-out 0s;
}
.login-box input:-webkit-autofill:focus,
.login-box .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8fafc !important;
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset, 0 0 0 4px rgba(96,165,250,.16) !important;
  box-shadow: 0 0 0 1000px #0f172a inset, 0 0 0 4px rgba(96,165,250,.16) !important;
}
/* Champ en lecture seule (entreprise pré-remplie par le QR) : lisible et
   visiblement non modifiable, au lieu d'un bloc clair sur fond sombre. */
.login-box .field input[readonly] {
  background: #182338 !important; color: #cbd5e1 !important; border-color: #2b3a52 !important; cursor: default;
}

/* 5. Surfaces héritées d'app.css : cartes, tableaux, listes, pastilles. */
.client-app .card,
.client-app .kpi,
.client-app .table-wrap,
.client-app .t-cards,
.client-app .t-cards thead,
.client-app .t-cards tbody tr { background: var(--client-card); color: var(--client-text); border-color: var(--client-border); }
.client-app .t-cards th { color: var(--client-muted); border-bottom-color: var(--client-border); }
.client-app .t-cards td { color: var(--client-text); border-bottom-color: var(--client-border); }
.client-app .card h2,
.client-app .card h3,
.client-app .kpi .kv { color: var(--client-text); }
.client-app hr { border-color: var(--client-border); }
.client-app .client-payment-list span { border-bottom-color: var(--client-border); }
.client-app .client-pagination button { background: var(--client-card); color: var(--client-text); border-color: var(--client-border); }
.client-app .client-pagination button:disabled { opacity: .45; }

/* 6. Case de sélection « vue » / « entreprise » : contraste garanti dans les
      deux thèmes (auparavant bleu clair figé, illisible en thème sombre). */
.client-app .client-vue-select { background-color: #eef3fd; color: #1b4fbf; border-color: #1b4fbf; }
.client-app .client-vue-select option { background: #fff; color: #1b4fbf; }

/* 7. Bandeaux d'information : lisibles sur fond clair comme sur fond sombre. */
.client-app .flash-ok   { background: #e3f6ec; color: #14683a; border-color: #bfe8d1; }
.client-app .flash-err  { background: #fdeaea; color: #a01d15; border-color: #f5c6c2; }
.client-app .flash-info { background: #e8effc; color: #16408f; border-color: #c8d8f5; }
.client-app .badge.b-grey { background: #eef1f6; color: #4b5563; }

@media (prefers-color-scheme: dark) {
  /* Les contrôles natifs et le masque d'autofill suivent le thème sombre
     grâce aux variables ; seules les valeurs figées sont reprises ici. */
  .client-app .client-vue-select {
    background-color: rgba(37,99,235,.18); color: #bfdbfe; border-color: #3b82f6;
  }
  .client-app .client-vue-select option { background: #111827; color: #e5e7eb; }
  .client-app .client-entreprise-label { color: #94a3b8; }

  .client-app .flash-ok   { background: rgba(22,163,74,.16); color: #86efac; border-color: rgba(22,163,74,.4); }
  .client-app .flash-err  { background: rgba(220,38,38,.16); color: #fca5a5; border-color: rgba(220,38,38,.4); }
  .client-app .flash-info { background: rgba(37,99,235,.16); color: #93c5fd; border-color: rgba(37,99,235,.4); }
  .client-app .badge.b-grey { background: rgba(148,163,184,.18); color: #cbd5e1; }

  .client-app .client-amount-paid { color: #86efac; }
  .client-app .client-amount-due  { color: #fca5a5; }
  .client-app .client-notification-card { border-color: #263d6d; }
  .client-app .client-notification-row { border-top-color: var(--client-border); }

  /* Liens : le bleu d'origine (#2563eb) passe mal sur fond sombre. */
  .client-app a:not(.btn) { color: #93c5fd; }
  .client-app .hint a { color: #93c5fd; }

  /* Boutons secondaires hérités d'app.css (fond blanc figé). */
  .client-app .btn-ghost { background: #172033 !important; color: #e5e7eb !important; border-color: #334155 !important; }
  .client-app .btn-ghost:hover { background: #1e293b !important; border-color: #475569 !important; }
  .client-app .btn-danger { background: rgba(220,38,38,.14) !important; color: #fca5a5 !important; border-color: rgba(220,38,38,.4) !important; }
  .client-app .btn-disabled, .client-app .btn:disabled { background: #1e293b !important; color: #64748b !important; }

  /* Zones dépliables et pastilles de pièces jointes. */
  .client-app .client-profil-mdp { background: rgba(148,163,184,.07); border-color: var(--client-border); }
  .client-app .client-profil-mdp > summary { color: var(--client-text); }
  .client-app .client-upload-summary { color: var(--client-muted); }
  .client-app .ec-note { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); color: #fcd34d; }

  /* Fenêtres contextuelles du portail. */
  .client-app .modal-box { background: var(--client-card); color: var(--client-text); }
  .client-app .modal-head { border-bottom-color: var(--client-border); }
  .client-app .modal-head h3 { color: var(--client-text); }
  .client-app .client-modal-head h3 { color: #fff; }   /* en-tête bleue : texte blanc conservé */
  .client-app .modal-foot { background: transparent; border-top-color: var(--client-border); }
  .client-app .modal-backdrop { background: rgba(2, 6, 20, .68); }
}

/* 8. Accessibilité : contraste renforcé et mode « contrastes forcés ». */
@media (forced-colors: active) {
  .client-app .btn, .client-app .card, .client-app .t-cards tbody tr { border: 1px solid CanvasText; }
  .client-fab { border: 1px solid CanvasText; }
}

/* v2.57.0 — l'attribut [hidden] prime sur tout `display` d'auteur. */
[hidden] { display: none !important; }

/* CLIENT PORTAL COLOR HARMONY v2.54
   Fond bleu-gris calme, sélecteurs reliés visuellement au portail,
   un seul langage d'état : neutre clair / actif bleu. */
body.client-app {
  background:
    radial-gradient(circle at 12% 0%, rgba(59, 130, 246, .055), transparent 30rem),
    #f4f7fb;
  color: #1e293b;
}

.client-app .page-bar {
  background: transparent;
}

.client-app .client-entreprise-label {
  color: #53627a;
  letter-spacing: .055em;
}

.client-app .client-vue-select {
  min-height: 46px;
  background-color: #f8fbff;
  color: #24344d;
  border-color: #cbd8ea;
  box-shadow: 0 4px 14px rgba(37, 63, 104, .055);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.client-app .client-vue-select:hover {
  background-color: #ffffff;
  border-color: #9fb8df;
}

.client-app .client-vue-select:focus,
.client-app .client-vue-select:focus-visible {
  outline: none;
  background-color: #ffffff;
  border-color: #356fe3;
  box-shadow: 0 0 0 3px rgba(53, 111, 227, .14), 0 6px 18px rgba(37, 63, 104, .08);
}

.client-app .client-vue-select option {
  background: #ffffff;
  color: #24344d;
}

.client-app .client-tabs {
  background: rgba(255, 255, 255, .9);
  border-color: #d9e2ef;
  box-shadow: 0 10px 25px rgba(31, 50, 81, .065);
}

.client-app .client-tab-btn {
  color: #667085;
}

.client-app .client-tab-btn:hover,
.client-app .client-tab-btn:focus-visible {
  background: #edf3ff;
  color: #2456b8;
}

.client-app .client-tab-btn:focus-visible {
  outline: 2px solid rgba(53, 111, 227, .55);
  outline-offset: 2px;
}

.client-app .client-tab-btn.active,
.client-app .client-tab-btn.active:hover,
.client-app .client-tab-btn.active:focus-visible {
  color: #ffffff;
  background: linear-gradient(135deg, #315fd9, #4d7cf0);
  box-shadow: 0 8px 18px rgba(49, 95, 217, .24);
}

.client-app .card,
.client-app .kpi {
  border-color: #dce4ef;
  box-shadow: 0 8px 24px rgba(31, 50, 81, .055);
}