:root {
  --fond: #f4f3f8; --carte: #ffffff; --texte: #1c1a29; --doux: #615d78; --ligne: #e3e1ec;
  --accent: #5b3fd1; --accent-fonce: #4529b3; --accent-clair: #efebff;
  --danger: #c62828; --ok: #15803d; --alerte: #c2410c;
  --rayon: 10px; --ombre: 0 1px 2px rgba(28, 26, 41, .06), 0 1px 3px rgba(28, 26, 41, .05);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 15px; color: var(--texte); background: var(--fond);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); line-height: 1.45; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.55rem; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
h3 { font-size: .92rem; margin: 1rem 0 .4rem; color: var(--doux); }
code { background: var(--accent-clair); padding: .1em .35em; border-radius: 4px; font-size: .88em; word-break: break-all; }
hr { border: 0; border-top: 1px solid var(--ligne); margin: 1rem 0; }

/* Barre de navigation */
.barre { background: #1c1534; color: #fff; display: flex; align-items: center; gap: 1.5rem; padding: 0 1.25rem; min-height: 56px; position: sticky; top: 0; z-index: 20; }
.marque { display: flex; align-items: center; gap: .6rem; color: #fff; white-space: nowrap; }
.marque:hover { text-decoration: none; }
.marque strong { display: block; font-size: .98rem; }
.marque small { display: block; font-size: .72rem; color: #b8afd9; letter-spacing: .04em; }
.logo { color: #a78bfa; font-size: 1.3rem; }
.nav { display: flex; align-items: center; gap: .25rem; flex: 1; }
.nav > a { color: #d9d4ee; padding: .45rem .75rem; border-radius: 7px; font-weight: 500; }
.nav > a:hover { background: rgba(255, 255, 255, .08); text-decoration: none; color: #fff; }
.nav > a.actif { background: rgba(167, 139, 250, .22); color: #fff; }
.recherche { margin-left: auto; }
.recherche input { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); color: #fff; width: 260px; }
.recherche input::placeholder { color: #a39cc0; }
.compte { display: flex; align-items: center; gap: .6rem; margin-left: .8rem; }
.compte a, .compte .lien { color: #d9d4ee; font-size: .88rem; }
.menu-btn { display: none; background: none; border: 0; color: #fff; font-size: 1.5rem; margin-left: auto; cursor: pointer; }

.page { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.page-auth { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: linear-gradient(160deg, #1c1534, #3b2a7a); }
.carte-auth { background: #fff; border-radius: 14px; padding: 2rem; width: 100%; max-width: 420px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.carte-auth h1 { margin: 1rem 0 .8rem; }
.marque-auth { font-weight: 700; color: var(--accent); display: flex; gap: .5rem; align-items: baseline; }
.marque-auth small { color: var(--doux); font-weight: 500; }

/* Formulaires */
input, select, textarea, button { font: inherit; color: inherit; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=url],
input[type=number], input[type=date], input[type=datetime-local], input:not([type]), select, textarea {
  border: 1px solid var(--ligne); border-radius: 7px; padding: .5rem .65rem; background: #fff; width: 100%; min-height: 38px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
input.court { width: 4.5rem; display: inline-block; }
input[type=color] { width: 2.6rem; height: 34px; padding: 2px; border: 1px solid var(--ligne); border-radius: 6px; background: #fff; }
input[type=checkbox], input[type=radio] { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
textarea { resize: vertical; }
.champ { display: flex; flex-direction: column; gap: .3rem; }
.champ > span:first-child { font-size: .83rem; font-weight: 600; color: var(--doux); }
.champ.large { grid-column: 1 / -1; }
.req { color: var(--danger); }
.case { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
.pile { display: flex; flex-direction: column; gap: .8rem; }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem 1rem; margin-bottom: 1rem; }
.formulaire { display: flex; flex-direction: column; gap: 1rem; max-width: 1100px; }
.sous-titre { margin: .6rem 0 0; padding-top: .8rem; border-top: 1px solid var(--ligne); }
.ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.mini { font-size: .85rem; color: var(--doux); display: inline-flex; align-items: center; gap: .35rem; }
.mini input, .mini select { width: auto; min-height: 34px; padding: .3rem .5rem; }
.aide { color: var(--doux); font-size: .87rem; margin: .3rem 0; }
.discret { color: var(--doux); }
fieldset { border: 1px solid var(--ligne); border-radius: 8px; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
legend { font-weight: 600; font-size: .85rem; padding: 0 .3rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 8px; padding: .5rem 1rem; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 38px; }
.btn:hover { background: var(--accent-fonce); text-decoration: none; }
.btn.secondaire { background: #fff; color: var(--texte); border-color: var(--ligne); }
.btn.secondaire:hover { border-color: var(--accent); color: var(--accent); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.petit { padding: .25rem .6rem; min-height: 30px; font-size: .85rem; }
.btn.large { width: 100%; padding: .7rem; }
.lien { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: .9rem; }
.lien.danger, .danger.lien { color: var(--danger); }
form.inline { display: inline; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.barre-actions { position: sticky; bottom: 0; background: var(--fond); padding: .8rem 0; justify-content: flex-end; border-top: 1px solid var(--ligne); }

/* Mise en page */
.entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.entete-carte { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .6rem; flex-wrap: wrap; }
.entete-carte h2 { margin: 0; }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 1.1rem 1.2rem; box-shadow: var(--ombre); margin-bottom: 1rem; min-width: 0; }
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1rem; align-items: start; }
.grille-2 > .carte { margin-bottom: 0; }
.grille-2 + .grille-2, .grille-dash + .grille-2 { margin-top: 1rem; }
.grille-dash { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 1rem; }
.grille-dash > .carte { margin: 0; }
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
.fil { font-size: .85rem; color: var(--doux); margin-bottom: .4rem; }
.num { color: var(--doux); font-weight: 500; font-variant-numeric: tabular-nums; }
.code { font-size: .85rem; color: var(--doux); font-weight: 500; background: var(--accent-clair); padding: .1rem .45rem; border-radius: 5px; vertical-align: middle; }
.badges { margin-top: .45rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; background: #eaf7ee; border: 1px solid #bfe5cb; color: #14532d; }
.flash.erreur { background: #fdecec; border-color: #f5c2c2; color: #7f1d1d; }
.vide { text-align: center; padding: 3rem 1rem; color: var(--doux); }

.badge { --c: #64748b; display: inline-block; font-size: .76rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, white); border: 1px solid color-mix(in srgb, var(--c) 28%, white); white-space: nowrap; }
.pastille { --c: #64748b; display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; background: var(--c); margin-right: .45rem; }
.pastille-n { display: inline-block; min-width: 1.6rem; text-align: center; background: var(--accent-clair); border-radius: 999px; padding: 0 .4rem; font-weight: 600; }
.retard { color: var(--danger); font-weight: 600; }

/* Tuiles */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.tuile { background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: .9rem 1rem; color: var(--texte); box-shadow: var(--ombre); display: flex; flex-direction: column; gap: .15rem; }
a.tuile:hover { border-color: var(--accent); text-decoration: none; }
.tuile b { font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tuile span { font-size: .82rem; color: var(--doux); }
.tuile.alerte b { color: var(--alerte); }
.tuile.neutre { background: #faf9fd; }

/* Graphiques simples */
.barre-statuts { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; margin-bottom: .8rem; background: var(--ligne); }
.barre-statuts span { background: var(--c); }
.legende { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.legende li { display: flex; justify-content: space-between; font-size: .9rem; }
.legende a { color: var(--texte); }
.histo { display: flex; align-items: flex-end; gap: 4px; height: 170px; padding-top: 1rem; }
.histo .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.histo .b { width: 100%; max-width: 34px; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; }
.histo .v { font-size: .7rem; color: var(--doux); }
.histo .l { font-size: .66rem; color: var(--doux); margin-top: .25rem; white-space: nowrap; }
.barres { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.barres li { display: grid; grid-template-columns: 9.5rem 1fr 2rem; gap: .5rem; align-items: center; font-size: .86rem; }
.barres a { color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jauge { background: var(--accent-clair); border-radius: 4px; height: 9px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--accent); }
.barres b { text-align: right; font-variant-numeric: tabular-nums; }

/* Listes de demandes compactes */
.liste-demandes { list-style: none; margin: 0; padding: 0; }
.liste-demandes li { padding: .55rem 0; border-bottom: 1px solid var(--ligne); }
.liste-demandes li:last-child { border: 0; }
.liste-demandes li > a { color: var(--texte); font-weight: 500; }
.liste-demandes .meta { font-size: .8rem; color: var(--doux); margin-top: .15rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.liste-demandes li.ferme > a { color: var(--doux); }

/* Onglets et filtres */
.onglets { display: flex; gap: .2rem; border-bottom: 1px solid var(--ligne); margin-bottom: 1rem; overflow-x: auto; scrollbar-width: thin; }
.onglets a { padding: .55rem .85rem; color: var(--doux); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.onglets a.actif { color: var(--accent); border-color: var(--accent); }
.onglets a:hover { text-decoration: none; color: var(--texte); }
.onglets.petits { border: 0; margin: 0; }
.onglets.petits a { padding: .25rem .6rem; font-size: .85rem; }
.compteur { font-size: .75rem; background: var(--ligne); border-radius: 999px; padding: .05rem .45rem; margin-left: .15rem; color: var(--doux); }
.actif .compteur { background: var(--accent-clair); color: var(--accent); }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .8rem; }
.filtres .q { flex: 1 1 280px; width: auto; }
.filtres select { width: auto; max-width: 210px; }
.resultat { font-size: .85rem; color: var(--doux); margin: 0 0 .5rem; }

/* Tableaux */
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); }
.carte .table-wrap { border: 0; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); padding: .6rem .7rem; border-bottom: 1px solid var(--ligne); background: #faf9fd; white-space: nowrap; position: sticky; top: 0; }
.table td { padding: .55rem .7rem; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.table tbody tr:hover { background: #faf9fe; }
.table tr:last-child td { border-bottom: 0; }
.table tr.ferme td { color: var(--doux); }
.table tr.urgent td:first-child { box-shadow: inset 3px 0 0 var(--alerte); }
.table .titre { font-weight: 600; color: var(--texte); }
.table .titre:hover { color: var(--accent); }
.table.compacte td, .table.compacte th { padding: .4rem .55rem; }
.table.options input:not([type=checkbox]):not([type=color]) { min-height: 32px; padding: .3rem .5rem; }
.tri { color: inherit; }
.tri.trie-asc::after { content: " ▲"; } .tri.trie-desc::after { content: " ▼"; }
.col-titre { min-width: 240px; } .col-id { width: 60px; }
.actions-ligne { white-space: nowrap; display: flex; gap: .4rem; align-items: center; }
.pagination { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 1rem; font-size: .9rem; }

/* Menus déroulants (details) */
.menu-deroulant { position: relative; display: inline-block; }
.menu-deroulant > summary { list-style: none; cursor: pointer; }
.menu-deroulant > summary::-webkit-details-marker { display: none; }
.panneau { position: absolute; z-index: 30; background: #fff; border: 1px solid var(--ligne); border-radius: 10px; box-shadow: 0 12px 30px rgba(28, 26, 41, .16); padding: 1rem; min-width: 280px; margin-top: .3rem; }
.menu-deroulant.droite .panneau { right: 0; }
.panneau.large { width: min(640px, 92vw); }
.panneau.colonnes { right: 0; max-height: 70vh; overflow: auto; display: flex; flex-direction: column; gap: .4rem; }
details.bloc { margin-top: .8rem; }
details.bloc > summary { list-style: none; cursor: pointer; display: inline-flex; }
details.bloc > summary::-webkit-details-marker { display: none; }
details.bloc[open] > summary { margin-bottom: .8rem; }
details.bloc form, details > form { margin-top: .5rem; }
.zone-danger details summary { cursor: pointer; margin-top: .8rem; }

/* Fiche demande */
.infos { display: grid; grid-template-columns: 7.5rem 1fr; gap: .45rem .8rem; margin: 0; font-size: .9rem; }
.infos dt { color: var(--doux); font-weight: 500; }
.infos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.statut-rapide select { width: auto; font-weight: 600; }
.texte { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .93rem; }
.texte img, .pj-img img { max-width: 100%; max-height: 380px; border-radius: 6px; border: 1px solid var(--ligne); display: block; margin: .4rem 0; }
.ajout-hist { border: 1px solid var(--ligne); border-radius: 9px; padding: .8rem; background: #faf9fd; display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.segment { display: inline-flex; border: 1px solid var(--ligne); border-radius: 8px; overflow: hidden; width: fit-content; background: #fff; }
.segment label { padding: .35rem .8rem; cursor: pointer; font-size: .88rem; display: flex; gap: .35rem; align-items: center; }
.segment label:has(input:checked) { background: var(--accent-clair); color: var(--accent); font-weight: 600; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.fichier input { max-width: 220px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--ligne); }
.timeline li { position: relative; padding: 0 0 1.1rem .9rem; }
.timeline li::before { content: ""; position: absolute; left: -1.43rem; top: .3rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--ligne); border: 2px solid #fff; }
.timeline .h-tache::before { background: var(--ok); }
.timeline .h-commentaire::before { background: var(--accent); }
.timeline .h-import::before { background: #0891b2; }
.timeline .h-statut::before, .timeline .h-systeme::before { background: #cbd5e1; }
.h-tete { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; font-size: .86rem; }
.h-tete time { color: var(--doux); margin-left: auto; }
.h-type { color: var(--doux); }
.duree { background: #e8f6ec; color: var(--ok); font-weight: 600; font-size: .78rem; padding: .05rem .45rem; border-radius: 999px; }
.h-corps { margin-top: .3rem; }
.h-systeme .h-corps, .h-statut .h-corps { font-size: .85rem; }
.h-edit { font-size: .82rem; }
.h-edit summary { cursor: pointer; color: var(--doux); }
.h-edit[open] { flex-basis: 100%; }
.lien-google { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 0; border-bottom: 1px solid var(--ligne); font-size: .9rem; }
.lien-google > div { flex: 1; min-width: 0; }
.lien-google .meta { font-size: .78rem; color: var(--doux); }
.pjs { list-style: none; margin: 0 0 .8rem; padding: 0; font-size: .88rem; }
.pjs li { padding: .35rem 0; border-bottom: 1px solid var(--ligne); overflow-wrap: anywhere; }
.pjs img { max-width: 100%; max-height: 140px; border-radius: 6px; display: block; margin-bottom: .3rem; }
.contacts { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.contacts li { padding: .55rem 0; border-bottom: 1px solid var(--ligne); }
.zone-danger { border-color: #f3d2d2; }
.etapes ol { padding-left: 1.2rem; display: grid; gap: .7rem; margin: 0; }
.compact { margin: .3rem 0; padding-left: 1.2rem; font-size: .9rem; }
.anomalie { border-bottom: 1px solid var(--ligne); padding: .45rem 0; }
.anomalie summary { cursor: pointer; }
.copiable { user-select: all; display: inline-block; padding: .4rem .6rem; }

/* Sélecteur multiple avec recherche */
.picker { position: relative; }
.picker-choix { display: flex; flex-wrap: wrap; gap: .3rem; border: 1px solid var(--ligne); border-radius: 7px; padding: .3rem; min-height: 38px; background: #fff; cursor: text; }
.picker-choix:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; }
.picker-puce { background: var(--accent-clair); color: var(--accent-fonce); border-radius: 6px; padding: .1rem .2rem .1rem .5rem; font-size: .85rem; display: inline-flex; gap: .2rem; align-items: center; }
.picker-puce button { background: none; border: 0; cursor: pointer; color: inherit; padding: 0 .3rem; font-size: 1rem; line-height: 1; }
.picker-saisie { border: 0 !important; outline: 0 !important; flex: 1; min-width: 8rem; min-height: 28px !important; padding: 0 .3rem !important; }
.picker-liste { position: absolute; z-index: 40; left: 0; right: 0; background: #fff; border: 1px solid var(--ligne); border-radius: 8px; box-shadow: 0 12px 30px rgba(28, 26, 41, .15); max-height: 260px; overflow: auto; margin-top: 2px; }
.picker-liste div { padding: .45rem .7rem; cursor: pointer; font-size: .9rem; }
.picker-liste div.focus, .picker-liste div:hover { background: var(--accent-clair); }
.picker-liste .vide-p { color: var(--doux); cursor: default; }

/* Responsive */
@media (max-width: 1100px) {
  .grille-dash { grid-template-columns: 1fr 1fr; }
  .fiche { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .barre { flex-wrap: wrap; padding: .5rem 1rem; }
  .menu-btn { display: block; }
  .nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; padding-bottom: .6rem; }
  .nav.ouvert { display: flex; }
  .recherche { margin: .4rem 0; } .recherche input { width: 100%; }
  .compte { margin: .3rem 0 0; justify-content: space-between; }
  .grille-dash, .grille-2 { grid-template-columns: 1fr; }
  .page { padding: 1rem 1rem 3rem; }
  .filtres select, .filtres .mini { flex: 1 1 45%; max-width: none; }
  /* tableaux en cartes */
  .table-wrap .table thead { display: none; }
  .table-wrap .table, .table-wrap .table tbody, .table-wrap .table tr, .table-wrap .table td { display: block; width: 100%; }
  .table-wrap .table tr { border-bottom: 1px solid var(--ligne); padding: .5rem .3rem; }
  .table-wrap .table td { border: 0; padding: .15rem .4rem; }
  .table-wrap .table td[data-l]:not(.col-titre):not(.col-nom)::before { content: attr(data-l) " : "; color: var(--doux); font-size: .8rem; }
  .table-wrap .table td:empty { display: none; }
  .infos { grid-template-columns: 6.5rem 1fr; }
  .panneau { position: fixed; left: 1rem; right: 1rem; top: 4rem; max-height: 80vh; overflow: auto; min-width: 0; }
}
@media print {
  .barre, .actions, .ajout-hist, .filtres, .onglets, .zone-danger, #google form, details.bloc { display: none !important; }
  .fiche { grid-template-columns: 1fr; }
  .carte { box-shadow: none; break-inside: avoid; }
}
.contacts .menu-deroulant { display: block; margin-top: .2rem; font-size: .85rem; }

/* ---- Liste des clients en cartes ---- */
.surtitre { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); margin: 0 0 .35rem; display: flex; align-items: center; gap: 10px; }
.surtitre::before { content: ""; width: 25px; height: 2px; background: var(--accent); }
.bascule { display: inline-flex; background: #fff; border: 1px solid var(--ligne); border-radius: 9px; padding: 3px; }
.bascule a { padding: .38rem .8rem; border-radius: 7px; color: var(--doux); font-weight: 600; font-size: .88rem; }
.bascule a:hover { text-decoration: none; color: var(--texte); }
.bascule a.actif { background: var(--texte); color: #fff; }
.resume-clients { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1.2rem; }
.resume-clients a { background: #fff; border: 1px solid var(--ligne); border-radius: 12px; padding: .9rem 1.1rem; color: var(--texte); display: flex; align-items: baseline; gap: .7rem; transition: border-color .15s, transform .15s; }
.resume-clients a:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.resume-clients a.actif { background: var(--texte); color: #fff; border-color: var(--texte); }
.resume-clients a.actif span { color: #b9bbc2; }
.resume-clients b { font-size: 1.7rem; font-family: "Geist Mono", ui-monospace, Consolas, monospace; line-height: 1; }
.resume-clients a.chaud b { color: var(--accent); }
.resume-clients span { font-size: .85rem; color: var(--doux); }
.filtres-clients { background: #fff; border: 1px solid var(--ligne); border-radius: 12px; padding: .6rem; }
.champ-recherche { flex: 1 1 320px; display: flex; align-items: center; gap: .4rem; background: var(--fond); border-radius: 8px; padding: 0 .7rem; }
.champ-recherche span { color: var(--doux); font-size: 1.1rem; }
.champ-recherche input { border: 0; background: transparent; }
.champ-recherche input:focus { outline: 0; }
.champ-recherche:focus-within { outline: 2px solid var(--accent); }
.puces-etat { display: inline-flex; gap: .25rem; }
.puces-etat a { padding: .35rem .75rem; border-radius: 999px; color: var(--doux); font-size: .86rem; font-weight: 600; border: 1px solid var(--ligne); }
.puces-etat a:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.puces-etat a.actif { background: var(--accent-clair); color: var(--accent); border-color: transparent; }

.grille-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.carte-client { position: relative; background: #fff; border: 1px solid var(--ligne); border-radius: 14px; padding: 1.1rem 1.15rem .9rem; display: flex; flex-direction: column; gap: .8rem; transition: box-shadow .18s, transform .18s, border-color .18s; overflow: hidden; }
.carte-client::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: transparent; }
.carte-client.en-cours::before { background: var(--accent); }
.carte-client:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(7, 8, 10, .09); border-color: #d4d4d8; }
.carte-client.inactif { opacity: .62; }
.cc-lien { position: absolute; inset: 0; z-index: 1; }
.carte-client a:not(.cc-lien) { position: relative; z-index: 2; }
.carte-client header { display: flex; gap: .8rem; align-items: center; }
.avatar { --c: #07080A; width: 46px; height: 46px; border-radius: 12px; background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95rem; letter-spacing: .03em; flex: none; font-family: Urbanist, Arial, sans-serif; }
.cc-titre { min-width: 0; flex: 1; }
.carte-client h2 { font-size: 1rem; margin: 0; line-height: 1.25; text-transform: none; letter-spacing: 0; color: var(--texte); font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-client h2::before { display: none; }
.cc-titre p { margin: .15rem 0 0; font-size: .8rem; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code-mono { font-family: "Geist Mono", ui-monospace, Consolas, monospace; font-size: .76rem; }
.cc-compteur { flex: none; display: flex; flex-direction: column; align-items: center; background: var(--accent-clair); color: var(--accent); border-radius: 10px; padding: .3rem .55rem; font-weight: 700; font-size: 1.1rem; line-height: 1; font-family: "Geist Mono", ui-monospace, Consolas, monospace; }
.cc-compteur small { font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-top: .2rem; font-family: Arial, sans-serif; }
.cc-compteur.urgent { background: var(--accent); color: #fff; }
.cc-contact { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .87rem; padding: .55rem .7rem; background: var(--fond); border-radius: 9px; }
.cc-nom { font-weight: 600; margin-right: auto; }
.cc-action { color: var(--texte); background: #fff; border: 1px solid var(--ligne); border-radius: 7px; padding: .15rem .5rem; font-size: .8rem; white-space: nowrap; }
.cc-action:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.cc-produits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.cc-produits li { --c: #64748b; font-size: .74rem; font-weight: 600; padding: .15rem .5rem; border-radius: 6px; color: color-mix(in srgb, var(--c) 85%, black); background: color-mix(in srgb, var(--c) 10%, white); }
.cc-produits li.plus { --c: #07080A; }
.carte-client footer { margin-top: auto; padding-top: .65rem; border-top: 1px dashed var(--ligne); display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .78rem; color: var(--doux); flex-wrap: wrap; }
.cc-tags { display: flex; gap: .35rem; align-items: center; }
.tag-support { background: #07080A; color: #fff; border-radius: 5px; padding: .08rem .45rem; font-weight: 600; font-size: .72rem; }
.tag-inactif { border: 1px solid var(--ligne); border-radius: 5px; padding: .05rem .4rem; }
@media (max-width: 860px) {
  .resume-clients { grid-template-columns: 1fr 1fr; }
  .grille-clients { grid-template-columns: 1fr; }
  .entete .actions { width: 100%; }
}

/* ---- Notes et documents ---- */
.zone-depot { border: 1px solid var(--ligne); border-radius: 10px; background: #fff; transition: border-color .15s, background .15s; }
.zone-depot textarea { border: 0; border-radius: 10px 10px 0 0; min-height: 120px; }
.zone-depot textarea:focus { outline: 0; }
.zone-depot:focus-within { border-color: var(--accent); }
.zone-depot.survol { border: 2px dashed var(--accent); background: var(--accent-clair); }
.depot-pied { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .5rem .6rem; border-top: 1px solid var(--ligne); background: var(--fond); border-radius: 0 0 10px 10px; }
.depot-pied .btn.petit { cursor: pointer; }
.depot-liste { flex: 1; font-size: .82rem; min-width: 0; }
.depot-pied .btn[type=submit] { margin-left: auto; }
.notes-form.masque { display: none; }
.notes-lecture { padding: .2rem 0 .8rem; }
.documents { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; }
.documents li { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--ligne); border-radius: 10px; padding: .45rem .55rem; background: #fff; min-width: 0; }
.doc-vignette { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex: none; display: grid; place-items: center; background: #07080A; }
.doc-vignette img { width: 100%; height: 100%; object-fit: cover; }
.doc-vignette:hover { text-decoration: none; }
.doc-ext { color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .05em; }
.doc-infos { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.doc-infos a { font-size: .86rem; font-weight: 600; color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-lien { display: inline-block; background: var(--accent-clair); border-radius: 6px; padding: .05rem .45rem; font-weight: 600; font-size: .88em; }
.notes-lecture img { max-height: 200px; width: auto; }