:root{
/* encre : quatre niveaux, jamais plus */
--ink:#16171D;--ink-2:#5A5C6B;--ink-3:#8E90A0;--ink-4:#C3C5D0;
/* surfaces */
--surface:#FFFFFF;--surface-2:#F7F7FA;--line-1:#EAEAEF;--bg:#F4F4F7;
/* Un seul accent pour tout ce qui est interactif. C'est l'encre elle-meme :
   Samuel a retire le violet le 06/08/2026, l'interface est en noir et blanc.
   Les cinq couleurs de statut ci-dessous sont conservees — elles portent une
   information metier (en retard, aujourd'hui, actif), pas une decoration. */
--brand:#16171D;--brand-soft:#F0F0F2;
/* statuts : les cinq couleurs deja utilisees dans le CRM, inchangees */
--st-retra:#8E8E93;--st-cours:#007AFF;--st-sortie:#FF9500;--st-factu:#FF3B30;--st-fini:#34C759;
--st-retra-soft:#F0F0F2;--st-cours-soft:#E8F1FE;--st-sortie-soft:#FFF3E3;--st-factu-soft:#FFECEB;--st-fini-soft:#E6F7EC;
/* quatre rayons */
--rs:8px;--rm:12px;--rl:18px;--rf:999px;
/* trois ombres */
--sh1:0 1px 2px rgba(22,23,29,.05);
--sh2:0 2px 8px rgba(22,23,29,.06),0 1px 2px rgba(22,23,29,.04);
--sh3:0 -8px 40px rgba(22,23,29,.14);
/* une police */
--font:'Geist','SF Pro Text',system-ui,-apple-system,sans-serif;
--font-mono:'Geist Mono',ui-monospace,monospace;
/* alias historiques, rediriges vers le systeme */
--card:var(--surface);--card2:var(--surface-2);
--border:var(--line-1);--border2:var(--line-1);
--text:var(--ink);--text1:var(--ink);--text2:var(--ink-2);--text3:var(--ink-3);
--accent:var(--brand);--c-primary:var(--brand);--c-bg2:var(--surface-2);--accent-light:#3A3C48;
--accent-glow:rgba(22,23,29,.10);--accent-subtle:rgba(22,23,29,.05);--accent-border:rgba(22,23,29,.18);
--primary:var(--brand);
--green:var(--st-fini);--blue:var(--st-cours);--yellow:var(--st-sortie);--red:var(--st-factu);--purple:#5A5C6B;
--hover:rgba(22,23,29,.03);--header-bg:rgba(255,255,255,.78);--modal-bg:var(--surface);
--scrollbar:var(--ink-4);--separator:var(--line-1);
--shadow-sm:var(--sh1);--shadow-md:var(--sh2);--shadow-glow:none;
--topbar-h:58px}

/* la police du systeme s'applique au document : sans cette regle, une page
   autonome qui ne declare pas font-family retombe sur la police par defaut
   du navigateur (Times) des qu'on remplace sa valeur litterale par une variable. */
html,body{font-family:var(--font)}
code,kbd,pre,samp,.mono{font-family:var(--font-mono)}

/* Le carre bleu qui apparait sous le doigt et le contour qui reste apres un
   clic souris sont retires partout. Le contour au CLAVIER est CONSERVE via
   :focus-visible : c'est l'accessibilite, ne jamais le supprimer. */
html,body,*{-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}


/* --- echelle : trois tailles, plancher 11 px --- */
.ds-t1{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.ds-t2{font-size:13px;line-height:1.45}
.ds-t3{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}

/* --- en-tete d'ecran : identite, etat, sous-titre, actions --- */
.ds-hd{background:var(--surface);border-bottom:1px solid var(--line-1);position:sticky;top:0;z-index:9}
.ds-hd-top{display:flex;align-items:flex-start;gap:11px;padding:13px 15px 10px}
.ds-hd-id{flex:1;min-width:0}
.ds-hd-name{font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.ds-hd-meta{display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.ds-hd-sub{font-size:13px;color:var(--ink-2);margin-top:5px;line-height:1.35}
.ds-hd-acts{display:flex;gap:6px;flex:none;align-items:center}
.ds-av{width:40px;height:40px;border-radius:50%;background:var(--brand-soft);color:var(--ink);
 font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none;position:relative}
.ds-av[data-vif]::after{content:'';position:absolute;bottom:0;right:0;width:10px;height:10px;
 border-radius:50%;background:var(--st-fini);border:2px solid var(--surface)}

/* --- remonter d'un cran depuis un ecran ouvert par-dessus un autre ---
   N'apparait que si l'ecran a ete ouvert DEPUIS un autre (une fiche de
   dossier ouverte depuis un profil multi-dossiers). La croix garde son
   role : tout fermer. */
.fiche-retour{padding:0 15px 2px}
.fiche-retour .ds-btn{min-height:38px}
@media(max-width:767px){.fiche-retour .ds-btn{min-height:44px}}

/* --- onglets en pilules, defilables au doigt --- */
.ds-tabs{display:flex;gap:5px;padding:0 12px 10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ds-tabs::-webkit-scrollbar{display:none}
.ds-tab{flex:none;border:1px solid transparent;background:none;font-family:inherit;font-size:13px;
 font-weight:500;color:var(--ink-3);padding:7px 13px;border-radius:var(--rf);cursor:pointer;
 white-space:nowrap;display:flex;align-items:center;gap:6px;min-height:34px;transition:background .15s,color .15s}
.ds-tab:hover:not(.on){background:var(--surface-2);color:var(--ink-2)}
.ds-tab.on{background:var(--brand);color:#fff;font-weight:600}
.ds-tab .n{font-size:11px;font-weight:700;padding:0 5px;border-radius:var(--rf);
 background:var(--st-sortie-soft);color:var(--st-sortie);line-height:16px;min-width:16px;text-align:center}
.ds-tab .n.calme{background:var(--surface-2);color:var(--ink-3)}
.ds-tab.on .n{background:rgba(255,255,255,.22);color:#fff}

/* --- carte : un titre discret, un contenu, une action --- */
.ds-card{background:var(--surface);border:1px solid var(--line-1);border-radius:var(--rm);
 margin-bottom:11px;overflow:hidden}
.ds-card-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 0}
.ds-card-t{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ds-card-a{font-size:12px;font-weight:600;color:var(--ink);background:var(--surface-2);border:none;
 border-radius:var(--rs);padding:7px 11px;cursor:pointer;font-family:inherit;min-height:32px;white-space:nowrap}
.ds-card-a:hover{background:var(--brand-soft)}
.ds-card-p{padding:11px 14px 14px}

/* --- liste cle / valeur : remplace les grilles a deux colonnes --- */
.ds-rows{padding:6px 0 4px;margin:0}
.ds-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 14px;
 border-bottom:1px solid var(--line-1)}
.ds-row:last-child{border-bottom:none}
.ds-row dt{font-size:13px;color:var(--ink-3);flex:none;margin:0}
.ds-row dd{margin:0;font-size:13px;font-weight:500;text-align:right;word-break:break-word;color:var(--ink)}
.ds-row dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink-4)}
.ds-row dd.vide{color:var(--ink-4);font-weight:400}
.ds-champ{background:var(--surface-2);border:1px solid var(--line-1);border-radius:var(--rs);
 padding:8px 10px;font-family:inherit;font-size:13px;color:var(--ink);min-height:36px;max-width:100%}
.ds-row .ds-champ{text-align:right;max-width:60%}

/* --- bandeau d'information, une ligne --- */
.ds-note{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--rm);
 font-size:13px;margin-bottom:11px;line-height:1.4}
.ds-note b{font-weight:600}
.ds-note .go{margin-left:auto;font-weight:600;color:inherit;white-space:nowrap;cursor:pointer;
 text-decoration:underline;flex:none;background:none;border:none;font-family:inherit;font-size:13px;
 padding:8px 2px;min-height:36px}
.ds-note.warn{background:var(--st-sortie-soft);color:#8A4B00}
.ds-note.err{background:var(--st-factu-soft);color:#9B1C16}
.ds-note.ok{background:var(--st-fini-soft);color:#166534}
.ds-note.info{background:var(--st-cours-soft);color:#0B4FA8}
.ds-note.calm{background:var(--surface-2);color:var(--ink-2)}
.ds-pt{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}

/* --- pastilles d'etat et compteurs --- */
.ds-chip{font-size:11px;font-weight:600;padding:2px 9px;border-radius:var(--rf);line-height:1.5;
 display:inline-flex;align-items:center;gap:4px}
.ds-chip.neutre{background:var(--surface-2);color:var(--ink-2)}
.ds-chip.retra{background:var(--st-retra-soft);color:var(--st-retra)}
.ds-chip.cours{background:var(--st-cours-soft);color:var(--st-cours)}
.ds-chip.sortie{background:var(--st-sortie-soft);color:#8A4B00}
.ds-chip.factu{background:var(--st-factu-soft);color:var(--st-factu)}
.ds-chip.fini{background:var(--st-fini-soft);color:#166534}
.ds-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:var(--rs);white-space:nowrap;flex:none}
.ds-badge.late{background:var(--st-factu-soft);color:var(--st-factu)}
.ds-badge.today{background:var(--st-sortie-soft);color:#8A4B00}
.ds-badge.soon{background:var(--st-cours-soft);color:var(--st-cours)}
.ds-badge.far{background:var(--surface-2);color:var(--ink-3)}
.ds-badge.done{background:var(--st-fini-soft);color:#166534}

/* --- boutons --- */
.ds-btn{border:none;border-radius:var(--rs);font-family:inherit;font-size:13px;font-weight:600;
 padding:11px 16px;cursor:pointer;min-height:40px;display:inline-flex;align-items:center;
 justify-content:center;gap:7px;white-space:nowrap;transition:background .15s}
.ds-btn.pri{background:var(--brand);color:#fff}
.ds-btn.pri:hover{background:#000}
.ds-btn.sec{background:var(--surface-2);color:var(--ink)}
.ds-btn.sec:hover{background:var(--brand-soft)}
.ds-btn.danger{background:var(--st-factu-soft);color:var(--st-factu)}
.ds-btn.large{width:100%}
.ds-icobtn{width:34px;height:34px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-1);
 color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;
 font-family:inherit;padding:0;flex:none}
.ds-icobtn:hover{background:var(--brand-soft);color:var(--ink)}
.ds-kb{width:32px;height:32px;border-radius:var(--rs);border:none;background:none;color:var(--ink-3);
 cursor:pointer;font-size:15px;font-family:inherit;display:flex;align-items:center;justify-content:center;flex:none}
.ds-kb:hover{background:var(--surface-2);color:var(--ink)}

/* --- ligne de liste : une tache, un document, une personne --- */
.ds-item{display:flex;align-items:center;gap:11px;padding:12px 13px;background:var(--surface);
 border:1px solid var(--line-1);border-radius:var(--rm);margin-bottom:7px;position:relative;flex-wrap:wrap}
.ds-item:hover{border-color:var(--ink-4)}
.ds-item.late{border-left:3px solid var(--st-factu)}
.ds-item.today{border-left:3px solid var(--st-sortie)}
.ds-item.err{border-left:3px solid var(--st-factu);background:var(--st-factu-soft)}
.ds-item-ic{width:30px;height:30px;border-radius:var(--rs);display:flex;align-items:center;
 justify-content:center;flex:none;background:var(--surface-2);color:var(--ink-2);font-size:15px}
.ds-item-ic.mail{background:var(--st-cours-soft);color:var(--st-cours)}
.ds-item-ic.doc{background:var(--st-fini-soft);color:#166534}
.ds-item-ic.suivi{background:var(--st-sortie-soft);color:#8A4B00}
.ds-item-b{flex:1;min-width:0}
.ds-item-t{font-size:13.5px;font-weight:500;line-height:1.3;color:var(--ink)}
.ds-item-s{font-size:12px;color:var(--ink-3);margin-top:3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ds-item-r{display:flex;align-items:center;gap:4px;flex:none;margin-left:auto}
.ds-item.fait .ds-item-t{color:var(--ink-3)}
.ds-item.fait .ds-item-ic{background:var(--st-fini-soft);color:var(--st-fini)}
.ds-item.sansobjet .ds-item-t{color:var(--ink-3)}
.ds-item.sansobjet .ds-item-ic{color:var(--ink-4)}

/* --- chiffres en colonnes --- */
.ds-money{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--line-1);gap:1px;
 border-radius:var(--rm);overflow:hidden;border:1px solid var(--line-1);margin-bottom:11px}
.ds-money>div{background:var(--surface);padding:13px 12px;min-width:0}
.ds-money .k{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
 color:var(--ink-3);margin-bottom:5px}
.ds-money .v{font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.ds-money .v small{font-size:13px;font-weight:500;color:var(--ink-3)}

/* --- avancement segmente : un segment par etape, lisible au doigt --- */
.ds-seg{display:flex;gap:3px;margin:2px 0 12px}
.ds-seg span{flex:1;height:6px;border-radius:var(--rf);background:var(--line-1);min-width:3px}
.ds-seg span.f{background:var(--st-fini)}
.ds-seg span.c{background:var(--brand)}
.ds-seg span.x{background:var(--ink-4)}
.ds-seg span.e{background:var(--st-factu)}
.ds-seg-l{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-3);margin-bottom:6px}
.ds-seg-l b{color:var(--ink);font-weight:600}

/* --- repliable --- */
.ds-fold{width:100%;display:flex;align-items:center;gap:8px;background:var(--surface);
 border:1px solid var(--line-1);border-radius:var(--rm);padding:12px 13px;font-family:inherit;
 font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;margin-bottom:7px;min-height:46px;text-align:left}
.ds-fold:hover{background:var(--surface-2)}
.ds-fold .n{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink-3);
 background:var(--surface-2);padding:2px 8px;border-radius:var(--rf)}
.ds-fold .fl{width:13px;height:13px;flex:none;transition:transform .2s;color:var(--ink-3)}
.ds-fold.on .fl{transform:rotate(90deg)}
.ds-folded{display:none}
.ds-folded.on{display:block}

/* --- chronologie --- */
.ds-tl{position:relative;padding-left:20px}
.ds-tl::before{content:'';position:absolute;left:4px;top:6px;bottom:6px;width:1.5px;background:var(--line-1)}
.ds-tl-i{position:relative;padding:0 0 16px}
.ds-tl-i::before{content:'';position:absolute;left:-20px;top:5px;width:9px;height:9px;border-radius:50%;
 background:var(--ink-4);border:2px solid var(--bg)}
.ds-tl-i.ok::before{background:var(--st-fini)}
.ds-tl-i.warn::before{background:var(--st-sortie)}
.ds-tl-i.err::before{background:var(--st-factu)}
.ds-tl-k{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
 display:flex;gap:8px;align-items:baseline}
.ds-tl-k time{margin-left:auto;font-weight:500;letter-spacing:0;flex:none}
.ds-tl-c{font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.45}

/* --- etat vide --- */
.ds-vide{text-align:center;padding:32px 16px;color:var(--ink-3);font-size:13px;background:var(--surface);
 border:1px solid var(--line-1);border-radius:var(--rm);margin-bottom:11px}
.ds-vide .ic{font-size:22px;display:block;margin-bottom:8px;color:var(--ink-4)}

/* --- la croix qui vide une barre de recherche ---
   Posee par static/sf-search-clear.js sur TOUTE barre de recherche du CRM,
   quelle que soit la page. Elle n'apparait qu'une fois le champ rempli
   (classe .on) et se place sur le bord droit du champ, jamais par-dessus le
   texte : le script reserve la place en padding des le depart. */
.sf-sx{position:absolute;top:0;right:0;width:34px;padding:0;margin:0;border:0;background:none;
 min-height:0;min-width:0;flex:none;
 display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-3);
 border-radius:var(--rs);z-index:2;-webkit-tap-highlight-color:transparent;line-height:0}
.sf-sx.on{display:flex}
/* place reservee a la croix, uniquement champ rempli : le texte ne passe
   jamais dessous. En !important et classe repetee : plusieurs ecrans
   verrouillent leur padding avec une regle plus specifique. */
input.sf-sx-in.sf-sx-in.sf-sx-in{padding-right:34px!important}
.sf-sx svg{width:15px;height:15px;pointer-events:none}
.sf-sx:hover{color:var(--ink)}
.sf-sx:active{color:var(--ink);background:var(--brand-soft)}

/* --- au doigt : rien en dessous de 44 px sur telephone --- */
@media(max-width:767px){
 .sf-sx{width:44px}
 input.sf-sx-in.sf-sx-in.sf-sx-in{padding-right:44px!important}
 .sf-sx svg{width:17px;height:17px}
 .ds-btn,.ds-fold,.ds-card-a,.ds-icobtn,.ds-kb,.ds-tab,.ds-note .go,.ds-champ{min-height:44px}
 .ds-icobtn{width:40px;height:40px}
 .ds-kb{width:44px;height:44px}
 .ds-money{grid-auto-flow:column}
 /* une ligne cle/valeur au doigt : l'email et le telephone y sont cliquables */
 .ds-row{min-height:44px;align-items:center}
 .ds-row dd a{display:inline-block;padding:5px 0}
}