/* CRM : Suivi DH, visites, tâches (crm.js). Sortie de portail.css (L9) ; chargée au démarrage, juste après elle, car crm.js est une zone de démarrage. Mêmes règles, même ordre. Restent dans portail.css, pour garder leur gagnant : .vst (.u-iflex), .videIllu (.empty), .sdhPlus (.btn), .sdhAjout .pied (.sdhConf .pied). */
.vst:hover{filter:brightness(.96)}
.vst.prevu {background:var(--info-d);color:var(--info);border-color:transparent}
.vst.retard{background:var(--att-d);color:var(--att);border-color:transparent}
.vst.fait  {background:var(--ok-d);color:var(--ok);border-color:transparent}
.vst.annule{background:var(--surf2);color:var(--encre3);border-color:var(--filet);text-decoration:line-through}
.vst.tache {background:var(--marque-d);color:var(--marque-e);border-color:transparent}
.vst .badge{padding:0 var(--e-1);font-size:smaller}
.vst.tache.faite{color:var(--encre3);text-decoration:line-through}
.sub.crmCr{display:block;margin:0;overflow-wrap:anywhere}
.crmCr .complet{white-space:pre-wrap}
.crmCrLire{margin-top:var(--e-1)}
/* CRM — « plus anciennes » (listes, lot 3) : sur téléphone, le bouton passe sous la phrase */
.crmPlusAnc .btn{margin-left:var(--e-2)}
@media(max-width:700px){
.crmPlusAnc .btn{display:block;margin:var(--e-2) 0 0}
}
.crmObligTxt .sub.crmCr{display:inline}
.sdhSvc{--svc:var(--marque-e);display:inline-flex;align-items:center;gap:var(--e-2);min-height:var(--h-ctrl);padding:var(--e-1) var(--e-3);border-radius:var(--r-rond);
    border:1px solid var(--filet2);border-color:color-mix(in srgb,var(--svc) 45%,var(--filet2));
    background:var(--surf2);background:color-mix(in srgb,var(--svc) 12%,var(--surf));color:var(--encre);font:var(--g-fort) var(--t-s)/1.2 var(--f-ui);cursor:pointer}
.sdhSvc::before{content:"";width:10px;height:10px;border-radius:var(--r-rond);background:var(--svc);flex:none}
.sdhSvc:hover{border-color:var(--svc)}
.sdhSvc[aria-expanded="true"],.sdhSvc[aria-pressed="true"]{background:color-mix(in srgb,var(--svc) 24%,var(--surf));box-shadow:inset 0 0 0 2px var(--svc)}
.sdhSvc .n{font-weight:var(--g-moyen);color:var(--encre);font-variant-numeric:tabular-nums}
.sdhSvc.retire{border-style:dashed}
.sdhCat,.sdhLignes{border:1px solid var(--filet);border-radius:var(--r);background:var(--surf);padding:var(--e-3) var(--e-3);margin-bottom:var(--e-3)}
.sdhCat{border-style:dashed}
.sdhLignes{--svc:var(--filet2);border-top:3px solid var(--svc)}
.sdhCat .liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 var(--e-3);margin-bottom:var(--e-2)}
.sdhCat label{display:flex;align-items:center;gap:var(--e-2);min-height:var(--h-ctrl);margin:0;font-weight:var(--g-moyen);color:var(--encre);cursor:pointer}
.sdhCat label input{width:18px;height:18px;flex:none}
.crmBlocTete .svcChamp{flex:1 1 100%;min-width:0;padding:var(--e-1) var(--e-2);border:2px solid color-mix(in srgb,var(--crit) 45%,var(--surf));border-radius:var(--r-l);background:color-mix(in srgb,var(--crit) 16%,var(--surf))}
.svcPt{display:inline-block;margin-right:var(--e-1)}
.sdhCat .ajout{display:flex;gap:var(--e-2)}
.sdhCat .ajout input{flex:1;min-width:0}
.sdhNat{font-size:var(--t-xs);font-weight:var(--g-fort);letter-spacing:.08em;text-transform:uppercase;color:var(--encre3);margin:var(--e-3) 0 2px}
.sdhL{display:flex;gap:var(--e-3);align-items:flex-start;padding:var(--e-2) 0;border-top:1px solid var(--filet)}
.sdhNat+.sdhL{border-top:0}
.sdhTxt{flex:1;min-width:0;padding-top:var(--e-2)}
.sdhTxt p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.sdhL.fait .sdhTxt p{color:var(--encre3);text-decoration:line-through}
.sdhMeta{font-size:var(--t-s);color:var(--encre3);margin-top:var(--e-1);display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-3);align-items:center}
.sdhAjout{display:grid;grid-template-columns:170px 1fr;gap:var(--e-2);margin:2px 0 var(--e-2);padding-bottom:var(--e-3);border-bottom:1px solid var(--filet)}
.sdhAjoutBtn{margin:2px 0 var(--e-2)}
#sdhSupprBtn{margin-right:auto}
.sdhAjout textarea,.sdhAjout .sdhAlerte,.sdhAjout .sdhConf{grid-column:1/-1}
.sdhAjout label{margin:0}
.sdhAlerte{background:var(--att-d);color:var(--att);border-radius:var(--r);padding:var(--e-2) var(--e-3);font-size:var(--t-s);margin:0}
@media (prefers-color-scheme:dark){
.sdhSvc::before{background:color-mix(in srgb,var(--svc) 55%,#fff)}
.sdhLignes{border-top-color:color-mix(in srgb,var(--svc) 55%,#fff)}
.sdhSvc{background:color-mix(in srgb,var(--svc) 22%,var(--surf))}
.sdhSvc:hover{border-color:color-mix(in srgb,var(--svc) 55%,#fff)}
.sdhSvc[aria-expanded="true"],.sdhSvc[aria-pressed="true"]{background:color-mix(in srgb,var(--svc) 32%,var(--surf));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--svc) 55%,#fff)}
}
@media(max-width:640px){
.sdhSvc,.sdhCat label{min-height:44px}
.sdhAjout textarea,.sdhAjout input,.sdhAjout select,#sdhNouveau{font-size:var(--t-m)}
.sdhAjout{grid-template-columns:1fr}
.sdhL{flex-wrap:wrap}
.sdhTxt{flex-basis:calc(100% - 80px)}
}
.videBlob{width:90px;height:70px;display:block;margin:0 auto 2px;color:var(--marque)}
.videIllu .btn{margin-top:var(--e-3)}
.vst:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--anneau)}
/* Charte commune, lot C9 (docs/decisions/2026-09-26-charte-commune.md) : les
     style= des gabarits de crm.js et informations.js deviennent ces classes à
     jetons. Seules les valeurs calculées restent posées en ligne, et en
     variables : --pf/--pe (teinte d'un nom, coul()) et --tf/--te (tuiles). */
.crmDefile{overflow-x:auto}
.crmNw{white-space:nowrap}
h3.sec.crmSecCa{margin:var(--e-4) 0 var(--e-2)}
.num.crmAutres{margin-top:var(--e-1)}
.crmProch{color:var(--marque-f)}
.crmCaSuivi{color:var(--marque-e);font-weight:var(--g-fort)}
.crmContacts{margin-top:var(--e-2);border-top:1px solid var(--filet);padding-top:var(--e-2)}
.sub.crmSvcTit{margin:var(--e-1) 0 var(--e-1)}
.crmPers{display:flex;align-items:center;gap:var(--e-2);padding:var(--e-1) 0 var(--e-1) var(--e-3)}
.crmPersTxt{flex:1;min-width:0}
/* tâches : sélection, tableau, colonnes, tâches du jour */
.crmSelBarre{display:flex;gap:var(--e-2);align-items:center;margin:0 0 var(--e-2);flex-wrap:wrap}
.chip.crmSelNb{background:var(--marque-d);color:var(--marque-e)}
.crmCase{width:auto}
.crmCarteC.crmFaite{color:var(--encre3)}
.crmCarteC.crmFaite b{text-decoration:line-through}
/* lignes de formulaire : tâches multiples (.ctl), personnes rencontrées (.cvp) */
.crmBloc{border:1px solid var(--filet);border-radius:var(--r);padding:var(--e-2);display:grid;gap:var(--e-2)}
.crmBlocTete{display:flex;gap:var(--e-2);align-items:center}
.ctl .crmBlocTete{flex-wrap:wrap}
.crmBlocTete select{flex:1;min-width:150px}
.cvp .crmBlocTete select{min-width:0}
.cvp-neuf{display:grid;grid-template-columns:1fr auto;gap:var(--e-2)}
.cvp-service{grid-column:1/-1}
/* Design approfondi, lots D7 à D9 (docs/decisions/2026-10-02-design-approfondi.md, partis pris 4 et 6).
     D7 : les services du Suivi DH sont des intercalaires qui disent leur état en mots. Rail qui défile
     sur téléphone (pastilles, pastille rouge du retard), colonne à gauche à partir de 701 px (une ligne
     à deux niveaux par service). La couleur fixe du service reste --svc, posée par sdhCouleurs(). */
.sdhCol{display:flex;gap:var(--e-2);overflow-x:auto;padding:var(--e-1);margin:0 0 var(--e-3)}
.sdhCol>*{flex:none}
.sdhColT,.sdhSvc .m{display:none}
.sdhSvc .x{display:flex;flex-direction:column;min-width:0;text-align:left}
.sdhSvc .al{min-width:18px;line-height:18px;padding:0 var(--e-1);border-radius:var(--r-rond);background:var(--crit);color:var(--surf);font-size:var(--t-xs);text-align:center;font-variant-numeric:tabular-nums}
.sdhSvc .m.r,.sdhResume .r{color:var(--crit);font-weight:var(--g-fort)}
/* service ouvert : la mention « n en retard » sur une plaque neutre, lisible quelle que soit la couleur du service */
.sdhSvc[aria-expanded="true"] .m.r{align-self:flex-start;margin-left:calc(-1*var(--e-1));padding:0 var(--e-1);border-radius:var(--r);background:var(--surf)}
.sdhTitre{margin:0;font:var(--g-fort) var(--t-l)/1.25 var(--f-titre);color:var(--encre)}
.sdhResume{margin:var(--e-1) 0 var(--e-3)}
.sdhInvite{margin:var(--e-2) 0}
@media(min-width:701px){
.sdhDeux{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--e-4);align-items:start}
.sdhCol{flex-direction:column;gap:var(--e-1);overflow:visible;margin:0;padding:0 var(--e-3) 0 0;border-right:1px solid var(--filet)}
.sdhColT{display:block;margin:0 0 var(--e-1)}
.sdhCol .sdhSvc{display:flex;gap:var(--e-3);width:100%;min-height:60px;padding:var(--e-2) var(--e-3);border:0;border-radius:var(--r)}
.sdhCol .sdhSvc:not([aria-expanded="true"]){background:transparent}
.sdhCol .sdhSvc:not([aria-expanded="true"]):hover{background:var(--surf2)}
.sdhCol .sdhSvc::before{width:14px;height:14px}
.sdhCol .sdhSvc.retire::before{background:transparent;border:2px dashed var(--encre3);box-sizing:border-box}
.sdhSvc .t{line-height:1.3}
.sdhSvc .m{display:block;font-size:var(--t-s);font-weight:var(--g-normal);line-height:1.35;color:var(--encre3)}
.sdhSvc .al,.sdhResume .et{display:none}
.sdhCol .sdhPlus{justify-content:flex-start;margin-top:var(--e-2)}
}
/* D8 : lignes du suivi. Nature en Spectral avec son compte (fin des petites capitales), case « Fait »
     de 22 px dans une cible de 44 px, étiquettes de relance (.chip), « Modifier » en lien discret dont
     la cible reste de 44 px sans épaissir la ligne (marges négatives). */
.sdhNat{display:flex;align-items:baseline;gap:var(--e-2);margin:var(--e-5) 0 var(--e-1);font:var(--g-fort) var(--t-l)/1.3 var(--f-titre);letter-spacing:0;text-transform:none;color:var(--encre)}
.sdhNat span{font:var(--g-moyen) var(--t-s)/1 var(--f-ui);color:var(--encre3);font-variant-numeric:tabular-nums}
.sdhL{padding:var(--e-1) 0}
.sdhMeta .btn-lien{margin:calc(-1*var(--e-3)) 0}
/* D9 : fiche établissement. Interlocuteurs et tâches (#ccCote, rempli par ccCoteRendre) en lignes à
     deux niveaux de 64 px, toute la ligne cliquable ; sous le suivi sur téléphone, en seconde colonne à
     partir de 1100 px. L'état vide reprend videHtml (phrase en Spectral italique, bouton d'action). */
#ccCote{margin-top:var(--e-4);border-top:1px solid var(--filet)}
#ccCote h3.sec{margin:var(--e-4) 0 var(--e-1)}
#ccCote .videIllu{padding:var(--e-2) 0 var(--e-3)}
@media(min-width:1100px){
#ccSuivi>#ccCote{grid-column:2;grid-row:1/span 3;margin-top:0;border-top:0;border-left:1px solid var(--filet);padding-left:var(--e-4)}
#ccCote h3.sec:first-child{margin-top:0}
}