/* ============================================================================
   QuantisDigitale - Espace Client (dashboard, factures, support, etc.)
   Fichier : dashboard-client.css (V2)
   Auteur : QuantisDigitale
   Version : 2025-08
   Tous droits réservés – Ne pas supprimer la signature QuantisDigitale
============================================================================ */

/* ------------------------- */
/* 0. IMPORTS & VARIABLES    */
/* ------------------------- */

/* Import police principale Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');

/* ===================== VARIABLES CSS GLOBALES ===================== */
:root {
  /* Branding principal */
  --couleur-primaire:   #2361ff;
  --couleur-accent:     #2ec4b6;
  --couleur-bg:         #ffffff;
  --couleur-bg-menu:    #f7faff;
  --couleur-texte:      #22305a;
  --couleur-texte-secondaire: #3e4a67;
  --couleur-fond-plein: #22305a;
  --ombre-header: 0 4px 24px rgba(35,97,255,0.07), 0 1.5px 6px rgba(40,44,62,0.07);
  --ombre-globale: 0 6px 36px rgba(35,97,255,0.08), 0 1.5px 6px rgba(40,44,62,0.05);
  --radius: 18px;
  --font-main: 'Inter', Arial, sans-serif;
  --transition-rapide: 0.18s cubic-bezier(.4,0,.2,1);

  /* Badges Statuts */
  --statut-en-cours-bg: #e6f3fe;
  --statut-en-cours-text: #2361ff;
  --statut-livre-bg: #e6fbf2;
  --statut-livre-text: #17b482;
  --statut-maintenance-bg: #fbeee6;
  --statut-maintenance-text: #d87213;
  --statut-attente-bg: #f5f6f8;
  --statut-attente-text: #8f98aa;
  --statut-brouillon-bg: #f5eafe;
  --statut-brouillon-text: #9440d7;
  --statut-archive-bg: #eff3f7;
  --statut-archive-text: #828fa3;

  /* Badges Factures */
  --facture-payee-bg: #e6fbf2;
  --facture-payee-text: #11b282;
  --facture-attente-bg: #f8f6ec;
  --facture-attente-text: #d8a510;
  --facture-annulee-bg: #ffe6e9;
  --facture-annulee-text: #d87213;
  --facture-remboursee-bg: #e8f7ea;
  --facture-remboursee-text: #14aa5c;

  /* Mode dark - prêt pour extension JS */
  --dark-couleur-bg:      #181f2f;
  --dark-couleur-texte:   #e4e8f7;
  --dark-couleur-menu:    #232c3a;
  --dark-couleur-block:   #202944;
  --dark-couleur-accent:  #22dcc0;
  --dark-couleur-primaire:#3575ff;
}

/* ------------------------- */
/* 1. STRUCTURE GLOBALE      */
/* ------------------------- */

/* Style général du body */
body {
  font-family: var(--font-main);
  background: var(--couleur-bg);
  color: var(--couleur-texte);
}

/* ------------------------- */
/* 2. HEADER CLIENT : PROFIL */
/* ------------------------- */

/* Dropdown profil utilisateur */
.bouton-profil {
  background: none;
  border: none;
  color: var(--couleur-texte);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  transition: color 0.16s;
  position: relative;
  z-index: 1100;
}
.bouton-profil:hover,
.bouton-profil:focus {
  color: var(--couleur-accent);
}
.menu-compte {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 2rem;
  background: #fff;
  box-shadow: var(--ombre-globale);
  border-radius: var(--radius);
  min-width: 220px;
  display: none;
  flex-direction: column;
  z-index: 1200;
  animation: fadeDropdown 0.23s cubic-bezier(.4,0,.2,1);
}
.menu-compte.ouvert { display: flex; }
.menu-compte a {
  padding: 1rem;
  text-decoration: none;
  color: var(--couleur-texte);
  border-bottom: 1px solid #eee;
  transition: background 0.16s, color 0.18s;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.menu-compte a:last-child { border-bottom: none; }
.menu-compte a:hover {
  background: var(--couleur-bg-menu);
  color: var(--couleur-accent);
}
@keyframes fadeDropdown {
  from { 
    opacity: 0; 
    transform: translateY(8px);
  }
  to   { 
    opacity: 1; 
    transform: none;
  }
}

/* ------------------------- */
/* 3. DASHBOARD LAYOUT       */
/* ------------------------- */

.dashboard-client {
  padding: 2.5rem 1.5rem;
  background: var(--couleur-bg);
  min-height: 100vh;
  animation: fadeInDashboard 1.1s cubic-bezier(.33,1,.68,1);
}
@keyframes fadeInDashboard {
  from { 
    opacity: 0; 
    transform: translateY(30px);
  }
  to   { 
    opacity: 1; 
    transform: none;
  }
}
.dashboard-welcome {
  margin-bottom: 2rem;
  animation: fadeInWelcome 0.8s .1s backwards;
}
@keyframes fadeInWelcome {
  from { 
    opacity: 0; 
    transform: translateY(-24px);
  }
  to   { 
    opacity: 1; 
    transform: none;
  }
}
.dashboard-welcome h1 {
  font-size: 2rem;
  color: var(--couleur-primaire);
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -1px;
  animation: fadeInRight 0.7s .25s backwards;
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(-28px);}
  to   { opacity: 1; transform: none;}
}
.dashboard-welcome p {
  font-size: 1.04rem;
  color: var(--couleur-texte-secondaire);
}

/* Layout principal (sidebar + main) */
.dashboard-layout {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.dashboard-side {
  flex: 0 0 340px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  min-width: 260px;
  animation: fadeInLeft 1s .2s backwards;
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px);}
  to   { opacity: 1; transform: none;}
}
.dashboard-main {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  min-width: 340px;
  animation: fadeInRightMain 1s .35s backwards;
}
@keyframes fadeInRightMain {
  from { opacity: 0; transform: translateX(40px);}
  to   { opacity: 1; transform: none;}
}

/* ------------------------- */
/* 4. BLOCS GÉNÉRIQUES (cards) */
/* ------------------------- */

.dashboard-block {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--ombre-globale);
  padding: 1.5rem 1.5rem 1rem 1.5rem;
  animation: cardAppear 1.1s cubic-bezier(.4,0,.2,1) backwards;
  transition: box-shadow .22s cubic-bezier(.33,1,.68,1), transform .2s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.dashboard-block:hover {
  box-shadow: 0 12px 48px rgba(35,97,255,.12), 0 2.5px 12px rgba(40,44,62,0.09);
  transform: translateY(-4px) scale(1.015);
}
@keyframes cardAppear {
  from { opacity: 0; transform: translateY(48px) scale(.97);}
  to   { opacity: 1; transform: none;}
}
.dashboard-block h2 {
  font-size: 1.17rem;
  color: var(--couleur-primaire);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* ------------------------- */
/* 5. LISTES : projets, factures, support, notifications */
/* ------------------------- */

.projets-list, .factures-list, .support-tickets, .notifs-list, .documents-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Lignes génériques animées (projets/factures/...) --- */
.projets-list li, .factures-list li, .document-row {
  display: flex;
  flex-direction: column;
  gap: 0.09rem;
  padding: 0.68rem 0;
  border-bottom: 1px solid #f1f3f8;
  opacity: 0.85;
  animation: fadeInRow 0.6s backwards;
}
.projets-list li:last-child,
.factures-list li:last-child,
.document-row:last-child { border-bottom: none; }
@keyframes fadeInRow {
  from { opacity: 0; transform: translateY(10px);}
  to   { opacity: 0.85; transform: none;}
}

/* ------------------------- */
/* 6. BADGES STATUTS (projets, documents) */
/* ------------------------- */

.badge-statut {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-weight: 600;
  font-size: 0.98rem;
  border-radius: 16px;
  padding: 0.26rem 0.99rem 0.26rem 0.7rem;
  background: #f1f7fe;
  color: var(--couleur-texte-secondaire);
  box-shadow: 0 2px 8px rgba(35, 97, 255, 0.06);
  transition: background 0.15s, color 0.17s;
  cursor: default;
}
.badge-statut.en-cours {
  background: var(--statut-en-cours-bg);
  color: var(--statut-en-cours-text);
}
.badge-statut.livre {
  background: var(--statut-livre-bg);
  color: var(--statut-livre-text);
}
.badge-statut.maintenance {
  background: var(--statut-maintenance-bg);
  color: var(--statut-maintenance-text);
}
.badge-statut.en-attente {
  background: var(--statut-attente-bg);
  color: var(--statut-attente-text);
}
.badge-statut.brouillon {
  background: var(--statut-brouillon-bg);
  color: var(--statut-brouillon-text);
}
.badge-statut.archive {
  background: var(--statut-archive-bg);
  color: var(--statut-archive-text);
}

/* Badges avancés pour documents */
.badge-statut.valide    { background: #e6fbf2; color: #17b482;}
.badge-statut.expire    { background: #fbeee6; color: #e27c5c;}
.badge-statut.asigner   { background: #fff6e0; color: #f8be39;}
.badge-statut.signe     { background: #e6f4fb; color: #2361ff;}
.badge-statut.archive   { background: #f3f5f8; color: #909ab8;}

/* ------------------------- */
/* 7. ACTIONS, BOUTONS       */
/* ------------------------- */

.btn-lien-tous, .btn-panel {
  color: var(--couleur-accent);
  font-size: 0.97rem;
  text-decoration: underline;
  margin-top: 0.9rem;
  display: inline-block;
  transition: color var(--transition-rapide);
  font-weight: 600;
}
.btn-lien-tous:hover, .btn-panel:hover {
  color: var(--couleur-primaire);
  text-decoration: none;
}
.btn-panel {
  background: var(--couleur-accent);
  color: #fff;
  border-radius: 12px;
  padding: 0.33rem 1.12rem;
  font-size: 0.99rem;
  font-weight: 600;
  text-decoration: none;
  margin-left: 0.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: none;
  box-shadow: 0 1.5px 7px rgba(35,97,255,0.09);
  transition: background 0.18s, color 0.18s, transform 0.19s cubic-bezier(.4,0,.2,1);
}
.btn-panel:focus { outline: 2px solid var(--couleur-accent);}
.btn-panel:hover, .btn-panel:focus {
  background: var(--couleur-primaire);
  color: #fff;
  transform: scale(1.04);
}
.aucun-service, .aucune-facture {
  color: #8b9bb5;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.2rem 0 1.3rem 0.3rem;
}

/* Actions rapides */
.actions-block .actions-liste {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.actions-liste a {
  color: var(--couleur-texte);
  background: #f7faff;
  padding: 0.65rem 1.18rem;
  border-radius: 9px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  transition: background var(--transition-rapide), color var(--transition-rapide), transform 0.19s cubic-bezier(.33,1,.68,1);
  will-change: transform;
}
.actions-liste a:hover {
  background: var(--couleur-accent);
  color: #fff;
  transform: translateX(6px) scale(1.03);
}

/* ------------------------- */
/* 8. SERVICES / PROJETS     */
/* ------------------------- */

@keyframes fadeInService {
  from { opacity:0; transform:translateY(32px) scale(0.97);}
  to   { opacity:1; transform:none;}
}
.services-row:hover {
  box-shadow:0 6px 22px rgba(35, 97, 255, 0.11);
  transform:translateY(-2px) scale(1.016);
}
.service-header {
  display:flex;
  align-items:flex-start;
  gap:1.4rem;
  justify-content:space-between;
  flex-wrap:wrap;
}
.services-list {
  list-style:none;
  margin:0;
  padding:0;
}
.services-list li {
  transition: box-shadow .19s, transform .17s;
}
.services-list li:hover {
  box-shadow: 0 2px 10px rgba(35,97,255,0.08);
  transform: scale(1.01);
}
.service-nom { font-weight: 600; color: var(--couleur-texte); font-size:1.09rem;}
.service-type { font-size:0.97rem; color:var(--couleur-texte-secondaire); opacity:0.83; margin-bottom:0.09rem; margin-left:1.1px;}
.service-date { font-size:0.93rem; color:#95a5a6; margin-top:0.08rem;}
.service-actions { display:flex; align-items:center; gap:0.7em; flex-wrap:wrap; }

/* ------------------------- */
/* 9. FACTURES & DOCUMENTS   */
/* ------------------------- */

/* Filtres factures */
.facture-filtres {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:2rem;
  align-items:center;
  background:#f9fbff;
  border-radius:1.2rem;
  padding:1.5rem 1.2rem;
  box-shadow:0 2px 10px #00306e08;
}
.facture-filtres > * {
  flex:1 1 220px;
  min-width:160px;
}
.label-recherche {
  font-size:0.98rem;
  color:var(--couleur-texte-secondaire);
  font-weight:500;
  margin-right:-0.7rem;
  margin-bottom:0.14rem;
  flex-basis:100%;
  letter-spacing:0.01em;
}
#recherche-factures {
  flex:2 1 220px;
  max-width:340px;
  padding:0.77em 1.18em;
  border-radius:11px;
  border:1.5px solid #dde6fc;
  background:#fff;
  font-size:1.03rem;
  color:var(--couleur-texte);
  box-shadow:0 1px 10px rgba(35, 97, 255, 0.04);
  transition:border-color 0.17s, box-shadow 0.17s;
  outline:none;
}
#recherche-factures:focus {
  border-color:var(--couleur-primaire);
  box-shadow:0 2px 24px rgba(35, 97, 255, 0.05);
}
#recherche-factures::placeholder {
  color: #b7c2d4;
  font-size: 0.98rem;
  font-style: italic;
}
#filtre-statut, #filtre-annee {
  flex: 1 1 180px;
  padding: 0.7em 0.9em;
  border-radius: 10px;
  border: 1.2px solid #dde6fc;
  background: #fff;
  color: var(--couleur-texte);
  font-size: 0.98rem;
  margin-left: 0.3rem;
  transition: border-color 0.18s, box-shadow 0.15s;
  outline: none;
}
#filtre-statut:focus, #filtre-annee:focus {
  border-color: var(--couleur-accent);
  box-shadow: 0 2px 16px rgba(46,196,182,0.07);
}
#reset-filtres {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.68em 1.17em;
  font-size: 1.01rem;
  border-radius: 10px;
  border: none;
  background: var(--couleur-accent);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  margin-left: 0.6rem;
  transition: background 0.18s, color 0.14s, box-shadow 0.13s;
  box-shadow: 0 2px 10px rgba(46,196,182,0.07);
  min-width: 120px;
}
#reset-filtres i {
  font-size: 1.22em;
  margin-right: 0.4em;
}
#reset-filtres .txt-reset {
  display: inline;
}
#reset-filtres:hover, #reset-filtres:focus {
  background: var(--couleur-primaire);
  color: #fff;
  box-shadow: 0 5px 20px rgba(35,97,255,0.12);
}
.facture-filtres:after {
  content: "";
  display: block;
  height: 1.5px;
  width: 98%;
  background: linear-gradient(90deg, #dde6fc 0%, #eaf6fe 100%);
  margin: 1.2rem auto 0.2rem auto;
  border-radius: 3px;
  opacity: 0.5;
}
/* Responsive filtres */
@media (max-width: 650px) {
  .facture-filtres {
    flex-direction: column;
    align-items: stretch;
    gap: 1.05rem 0;
    padding: 1.1rem 0.7rem;
  }
  .label-recherche {
    margin-bottom: 0.3rem;
    margin-right: 0;
  }
  #recherche-factures, #filtre-statut, #filtre-annee, #reset-filtres {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Table factures */
.table-factures-wrapper { width:100%; overflow-x:auto; background:#f7faff; border-radius:1rem; margin-bottom:2rem; box-shadow:0 1px 8px #0061ad09; }
.table-factures { width:100%; min-width:680px; border-collapse:separate; border-spacing:0; font-size:1rem; }
.table-factures th, .table-factures td {
  padding:.7rem .45rem;
  text-align:left;
  white-space:nowrap;
  vertical-align:middle;
}
.table-factures th { background:#f2f6ff; position:sticky; top:0; z-index:2; }

/* Boutons actions factures */
td.actions { 
  display: flex; 
  gap: 0.7rem; 
}
.actions .btn-facture-apercu, 
.actions .btn-facture-imprimer {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--couleur-accent, #278bf5);
  color:#fff;
  border:none;
  outline:none;
  font-size:1.2rem;
  border-radius:10px;
  padding:0.5em 0.82em;
  margin:0 0.17em;
  box-shadow:0 2px 8px #009bb626;
  transition:background 0.16s, transform 0.13s;
  cursor:pointer;
}
.actions .btn-facture-apercu:hover, 
.actions .btn-facture-imprimer:hover {
  background:#179eaa;
  transform:scale(1.06);
}
.actions.btn-facture-apercu i, 
.actions .btn-facture-imprimer i {
  margin:0 !important;
}
.btn-facture-apercu:hover {
  background: linear-gradient(90deg,#3575ff 30%,#19dec2 100%);
  box-shadow: 0 3px 12px #19dec244;
  transform: translateY(-2px) scale(1.04);
}
.btn-facture-imprimer:hover {
  background: linear-gradient(90deg,#19dec2 60%,#3575ff 100%);
  box-shadow: 0 3px 12px #3575ff44;
  transform: translateY(-2px) scale(1.04);
}
/* Statuts de facture */
.badge-facture {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 600; border-radius: 14px; font-size: .99em;
  padding: 0.19em 0.95em; background: #f4f7fd; color: #2e4666;
}
.badge-facture.payee      { background: var(--facture-payee-bg); color: var(--facture-payee-text);}
.badge-facture.attente    { background: var(--facture-attente-bg); color: var(--facture-attente-text);}
.badge-facture.annulee    { background: var(--facture-annulee-bg); color: var(--facture-annulee-text);}
.badge-facture.remboursee { background: var(--facture-remboursee-bg); color: var(--facture-remboursee-text);}

/* Modale de facture (popup) */
#facture-modal {
  position: fixed !important;
  inset:0;
  z-index: 99999;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(36, 50, 92, 0.24);
  z-index: 1;
  backdrop-filter: blur(2px);
}
.modal-facture-contenu {
  z-index: 2;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 38px rgba(36,70,120,0.24), 0 1.5px 6px #5adfc2;
  padding: 2.5rem 2.5rem 1.5rem 2.5rem;
  min-width: 340px;
  max-width: 98vw;
  max-height: 95vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  animation: popInModal 0.22s cubic-bezier(.36,2,.45,.82);
}
@keyframes popInModal {
  from { opacity: 0; transform: scale(0.88);}
  to { opacity: 1; transform: scale(1);}
}
.fermer-modale {
  position: absolute;
  right: 24px; top: 16px;
  font-size: 1.7rem;
  background: none;
  border: none;
  color: #4b72d7;
  cursor: pointer;
  transition: color 0.18s;
}
.fermer-modale:hover { color: #df4b44; }
.logo-modal {
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: 1.35rem;
  color: #19dec2;
  letter-spacing: 0.5px;
}
.logo-modal span { color: #3575ff; }
.num-facture {
  font-weight: 600;
  font-size: 1.08rem;
  margin-left: 2.5rem;
  color: #293561;
}
.modal-facture-header {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 1.2rem;
}
.modal-facture-corps p {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: #202538;
}

/* ------------------------- */
/* 10. SUPPORT & NOTIFS      */
/* ------------------------- */

.support-tickets li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f7faff;
  padding: 0.77rem 1.1rem;
  border-radius: 9px;
  margin-bottom: 0.6rem;
  transition: background var(--transition-rapide), box-shadow .16s;
  animation: fadeInSupport 0.6s backwards;
}
@keyframes fadeInSupport {
  from { opacity: 0; transform: translateY(24px);}
  to   { opacity: 1; transform: none;}
}
.support-tickets a {
  display: flex;
  align-items: center;
  gap: 1.08rem;
  text-decoration: none;
  color: var(--couleur-texte);
  flex: 1;
  transition: color var(--transition-rapide);
}
.support-tickets a:hover { color: var(--couleur-accent); }
.ticket-sujet { font-weight: 500; font-size: 1.02rem; }
.ticket-date  { color: var(--couleur-texte-secondaire); font-size: 0.98rem;}
.ticket-statut {
  font-size: 0.93rem;
  padding: 2px 13px;
  border-radius: 8px;
  font-weight: 500;
  margin-left: 0.7rem;
}
.ticket-statut.ouvert  { background: #f7f6e8; color: #b8a300; }
.ticket-statut.resolu  { background: #e8f7ea; color: #14aa5c; }

.notifs-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #f7faff;
  border-radius: 8px;
  padding: 0.66rem 1.1rem;
  font-size: 0.98rem;
  margin-bottom: 0.6rem;
  animation: fadeInNotif 0.65s backwards;
}
@keyframes fadeInNotif {
  from { opacity: 0; transform: translateY(24px);}
  to   { opacity: 1; transform: none;}
}
.notif-info i { color: var(--couleur-accent);}
.notif-alert i { color: #e57321;}
.notif-promos i { color: #fa49b3; }

/* ------------------------- */
/* 11. SÉCURITÉ SESSIONS     */
/* ------------------------- */

.dashboard-securite {
  background: var(--couleur-fond-plein);
  color: #fff;
  border-radius: var(--radius);
  padding: 1rem 2rem;
  margin: 2.2rem 0 0 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.95rem;
  animation: fadeInUpSecu 1.1s .25s backwards;
}
@keyframes fadeInUpSecu {
  from { opacity: 0; transform: translateY(34px);}
  to   { opacity: 1; transform: none;}
}
.dashboard-securite i {
  color: var(--couleur-accent);
  font-size: 1.2rem;
}

/* ------------------------- */
/* 12. RESPONSIVE DESIGN     */
/* ------------------------- */

/* Tablettes : layout colonne */
@media (max-width: 1100px) {
  .dashboard-layout {
    flex-direction: column;
    gap: 1.5rem;
  }
  .dashboard-side, .dashboard-main {
    max-width: 100%;
    width: 100%;
  }
}
@media (max-width: 700px) {
  .dashboard-client {
    padding: 1.2rem 0.3rem;
  }
  .dashboard-block {
    padding: 1.2rem 0.8rem 0.8rem 0.8rem;
    border-radius: 11px;
  }
  .dashboard-side, .dashboard-main {
    min-width: 0;
    gap: 1.2rem;
  }
  .dashboard-welcome h1 {
    font-size: 1.25rem;
    gap: 0.2rem;
  }
  .dashboard-welcome p {
    font-size: 0.96rem;
  }
}
@media (max-width: 500px) {
  .dashboard-client {
    padding: 0.5rem 0.01rem;
  }
  .dashboard-block {
    padding: 0.85rem 0.23rem 0.7rem 0.23rem;
    border-radius: 8px;
  }
  .dashboard-welcome h1 {
    font-size: 1.06rem;
  }
  .dashboard-block h2 {
    font-size: 0.98rem;
    gap: 0.3rem;
  }
}

/* Scrollbar custom */
::-webkit-scrollbar { height: 9px; background: #ececec; }
::-webkit-scrollbar-thumb { background: #e0e9f9; border-radius: 7px; }

/* ------------------------- */
/* 13. DARK MODE (structure) */
/* ------------------------- */

html.dark, body.dark {
  background: var(--dark-couleur-bg);
  color: var(--dark-couleur-texte);
}
.dark .dashboard-client,
.dark .dashboard-block,
.dark .modal-facture-contenu {
  background: var(--dark-couleur-block) !important;
  color: var(--dark-couleur-texte) !important;
}
.dark .dashboard-block,
.dark .modal-facture-contenu {
  box-shadow: 0 8px 38px #141d301e, 0 1.5px 6px #22dcc034;
}
.dark .dashboard-block h2,
.dark .dashboard-welcome h1 {
  color: var(--dark-couleur-primaire);
}
.dark .btn-panel,
.dark .btn-panel:focus {
  background: var(--dark-couleur-accent);
  color: #fff;
}
.dark .menu-compte,
.dark .support-tickets li,
.dark .notifs-list li {
  background: var(--dark-couleur-menu);
  color: var(--dark-couleur-texte);
}
.dark .badge-statut.livre    { background: #163d34; color: #13e6a4; }
.dark .badge-statut.en-cours { background: #1c2748; color: #3dbbff; }
.dark .badge-statut.maintenance { background: #423127; color: #ffa241; }
.dark .badge-statut.archive  { background: #232c3a; color: #7c92b2; }

/* ============================================================================
   Fin du fichier QuantisDigitale (V2) - dashboard-client.css
============================================================================ */