/* ------------------------------------------------------------------
   Facette · Cabinets · « Tout va bien ? » (sante.js, 21/10/2026).
   Trois couleurs, une phrase par client. Que des variables de
   styles.css ; chaque couleur d'état a sa version pour le fond clair
   (rien à ajouter dans theme-clair.py). Réutilise .cb-tete, .cb-titre,
   .cb-badge, .cb-note, .cb-nombre de cabinets.css.
   ------------------------------------------------------------------ */

#vue-sante{
  --sa-rouge:#FF5C7A;--sa-orange:#FFB054;--sa-vert:#2FD3A5;--sa-gris:color-mix(in srgb,var(--texte) 28%,transparent);
  --sa-t-rouge:#FF9FB3;--sa-t-orange:#FFC77D;--sa-t-vert:#7DF0CD;
  --sa-doux:color-mix(in srgb,var(--texte) 5%,transparent);
}
html[data-theme="clair"] #vue-sante{
  --sa-rouge:#D6243F;--sa-orange:#E67E0E;--sa-vert:#16A37C;
  --sa-t-rouge:#A81447;--sa-t-orange:#9A4E00;--sa-t-vert:#0F6B50;
}

/* ---- en-tête ---- */
#vue-sante .sa-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 24px;flex-wrap:wrap}
#vue-sante .sa-maj{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--texte-faible);padding-top:6px}
#vue-sante .sa-message{margin-top:12px;padding:9px 14px;border-radius:10px;font-size:14px;background:color-mix(in srgb,var(--sa-vert) 14%,transparent);border:1px solid color-mix(in srgb,var(--sa-vert) 40%,transparent);color:var(--texte)}
#vue-sante .sa-message-erreur{background:color-mix(in srgb,var(--sa-rouge) 12%,transparent);border-color:color-mix(in srgb,var(--sa-rouge) 40%,transparent)}
#vue-sante .sa-message[hidden]{display:none}

/* ---- les points de couleur ---- */
#vue-sante .sa-point{display:inline-block;width:14px;height:14px;border-radius:50%;flex:none;background:var(--sa-gris);box-shadow:0 0 0 3px color-mix(in srgb,var(--texte) 6%,transparent)}
#vue-sante .sa-point-grande{width:22px;height:22px}
#vue-sante .sa-point-rouge{background:var(--sa-rouge);box-shadow:0 0 0 3px color-mix(in srgb,var(--sa-rouge) 22%,transparent)}
#vue-sante .sa-point-orange{background:var(--sa-orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--sa-orange) 22%,transparent)}
#vue-sante .sa-point-vert,#vue-sante .sa-point-ok{background:var(--sa-vert);box-shadow:0 0 0 3px color-mix(in srgb,var(--sa-vert) 22%,transparent)}

/* ---- le résumé du matin ---- */
#vue-sante .sa-resume{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:20px}
#vue-sante .sa-tuile{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--rayon);border:1px solid var(--trait);background:var(--carte)}
#vue-sante .sa-tuile strong{display:block;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-0.01em;line-height:1.2}
#vue-sante .sa-tuile span{display:block;font-size:13px;color:var(--texte-doux);margin-top:2px}
#vue-sante .sa-tuile-rouge{border-color:color-mix(in srgb,var(--sa-rouge) 45%,transparent)}
#vue-sante .sa-tuile-rouge strong{color:var(--sa-t-rouge)}
#vue-sante .sa-tuile-orange{border-color:color-mix(in srgb,var(--sa-orange) 45%,transparent)}
#vue-sante .sa-tuile-orange strong{color:var(--sa-t-orange)}
#vue-sante .sa-tuile-vert{border-color:color-mix(in srgb,var(--sa-vert) 45%,transparent)}
#vue-sante .sa-tuile-vert strong{color:var(--sa-t-vert)}
#vue-sante .sa-tuile-large{grid-column:1 / -1;padding:24px 26px}
#vue-sante .sa-tuile-large strong{font-size:26px}

/* ---- blocs ---- */
#vue-sante .sa-bloc{margin-top:30px}
#vue-sante .sa-bloc-tete{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
#vue-sante .sa-h2{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-0.01em}

/* ---- la liste des clients ---- */
#vue-sante .sa-clients{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;max-width:1040px}
#vue-sante .sa-client{border:1px solid var(--trait);border-radius:var(--rayon);background:var(--carte);overflow:hidden;transition:border-color .15s}
#vue-sante .sa-client:hover,#vue-sante .sa-client.sa-ouvert{border-color:var(--trait-fort)}
#vue-sante .sa-client-rouge{border-left:4px solid var(--sa-rouge)}
#vue-sante .sa-client-orange{border-left:4px solid var(--sa-orange)}
#vue-sante .sa-client-vert{border-left:4px solid var(--sa-vert)}
#vue-sante .sa-client-gris{border-left:4px solid var(--sa-gris)}
#vue-sante .sa-ligne{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:15px 18px;cursor:pointer}
#vue-sante .sa-ligne:focus-visible{outline:2px solid var(--violet);outline-offset:-2px;border-radius:var(--rayon)}
#vue-sante .sa-nom{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;flex:0 1 260px}
#vue-sante .sa-nom b{font-family:var(--display);font-size:17px;font-weight:700;color:var(--texte)}
#vue-sante .sa-nom small{font-size:13px;color:var(--texte-faible)}
#vue-sante .sa-phrase{flex:1 1 280px;font-size:14.5px;font-weight:600;color:var(--texte-doux)}
#vue-sante .sa-phrase-rouge{color:var(--sa-t-rouge)}
#vue-sante .sa-phrase-orange{color:var(--sa-t-orange)}
#vue-sante .sa-phrase-vert{color:var(--sa-t-vert)}
#vue-sante .sa-chips{font-size:12.5px;color:var(--texte-faible);border:1px solid var(--trait);border-radius:999px;padding:2px 10px;white-space:nowrap}
#vue-sante .sa-fleche{width:9px;height:9px;border-right:2px solid var(--texte-faible);border-bottom:2px solid var(--texte-faible);transform:rotate(45deg);margin:0 4px 4px auto;transition:transform .2s;flex:none}
#vue-sante .sa-ouvert .sa-fleche{transform:rotate(-135deg);margin-bottom:-4px}

/* ---- le détail d'un client ---- */
#vue-sante .sa-detail{display:none;padding:0 18px 16px}
#vue-sante .sa-ouvert .sa-detail{display:block}
#vue-sante .sa-detail-tete{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;padding:12px 0 4px;border-top:1px solid var(--trait);font-size:13.5px}
#vue-sante .sa-lien{color:var(--cb-violet,var(--violet));font-weight:600;text-decoration:none}
#vue-sante .sa-lien:hover{text-decoration:underline;text-underline-offset:3px}
#vue-sante .sa-rien{margin-top:10px;font-size:14px;color:var(--texte-doux)}
#vue-sante .sa-depuis{font-size:12.5px;color:var(--texte-faible)}

/* ---- une alerte ---- */
#vue-sante .sa-alertes{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
#vue-sante .sa-alerte{padding:12px 14px;border-radius:12px;border:1px solid var(--trait);border-left-width:4px;background:var(--sa-doux)}
#vue-sante .sa-alerte-rouge{border-left-color:var(--sa-rouge)}
#vue-sante .sa-alerte-orange{border-left-color:var(--sa-orange)}
#vue-sante .sa-alerte-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#vue-sante .sa-alerte strong{font-size:15px}
#vue-sante .sa-alerte-rouge strong{color:var(--sa-t-rouge)}
#vue-sante .sa-alerte-orange strong{color:var(--sa-t-orange)}
#vue-sante .sa-alerte p{margin-top:4px;font-size:14px;color:var(--texte-doux);max-width:80ch}
#vue-sante .sa-alerte-pied{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin-top:10px}
#vue-sante .sa-actions{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-left:auto}
#vue-sante .sa-alerte-vue{opacity:.62}
#vue-sante .sa-alerte-vue strong{color:var(--texte-doux)}
#vue-sante .sa-qui{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:999px;border:1px solid var(--trait-fort);color:var(--texte-doux);white-space:nowrap}
#vue-sante .sa-qui-cabinet{color:var(--cb-violet,var(--violet));border-color:color-mix(in srgb,var(--cb-violet,var(--violet)) 45%,transparent)}
#vue-sante .sa-qui-nous{color:var(--sa-t-vert);border-color:color-mix(in srgb,var(--sa-vert) 45%,transparent)}
#vue-sante .sa-calmes{margin-top:14px;font-size:14px;color:var(--texte-doux);display:flex;align-items:flex-start;gap:10px;max-width:1040px;line-height:1.5}
#vue-sante .sa-calmes .sa-point{position:relative;top:4px}
#vue-sante .sa-calmes strong{color:var(--sa-t-vert);font-weight:600}
#vue-sante details.sa-vues{margin-top:26px}
#vue-sante details.sa-vues summary{cursor:pointer;font-size:13px;color:var(--texte-faible)}
#vue-sante details.sa-vues .sa-alertes{margin-top:10px;max-width:1040px}

/* ---- boutons ---- */
#vue-sante .sa-bouton{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;font-weight:600;font-size:13px;background:var(--violet);border:1px solid var(--violet);color:#fff;cursor:pointer}
#vue-sante .sa-bouton:hover{filter:brightness(1.08)}
#vue-sante .sa-bouton:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
#vue-sante .sa-bouton[disabled]{opacity:.6;cursor:wait}
#vue-sante .sa-bouton-doux{background:transparent;border-color:var(--trait-fort);color:var(--texte)}
#vue-sante .sa-bouton-doux:hover{border-color:var(--violet);filter:none}
#vue-sante .sa-bouton-petit{padding:5px 11px;font-size:12.5px}

/* ---- nos branchements ---- */
#vue-sante .sa-branches{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
#vue-sante .sa-branche{padding:13px 15px;border-radius:12px;border:1px solid var(--trait);background:var(--carte)}
#vue-sante .sa-branche-rouge{border-color:color-mix(in srgb,var(--sa-rouge) 50%,transparent)}
#vue-sante .sa-branche-orange{border-color:color-mix(in srgb,var(--sa-orange) 50%,transparent)}
#vue-sante .sa-branche-tete{display:flex;align-items:center;gap:9px;margin-bottom:6px}
#vue-sante .sa-branche-nom{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--texte-faible)}
#vue-sante .sa-branche strong{display:block;font-size:14.5px}
#vue-sante .sa-branche-rouge strong{color:var(--sa-t-rouge)}
#vue-sante .sa-branche-orange strong{color:var(--sa-t-orange)}
#vue-sante .sa-branche-gris strong{color:var(--texte-doux)}
#vue-sante .sa-branche p{margin-top:3px;font-size:13px;color:var(--texte-doux)}
#vue-sante .sa-branche .sa-bouton{margin-top:10px}
#vue-sante .sa-branche .sa-depuis{display:inline-block;margin-top:10px;margin-right:8px}

@media (max-width:700px){
  #vue-sante .sa-ligne{padding:13px 14px}
  #vue-sante .sa-phrase{flex-basis:100%;order:3}
  #vue-sante .sa-chips{order:4;white-space:normal}
  #vue-sante .sa-detail{padding:0 14px 14px}
  #vue-sante .sa-actions{margin-left:0}
}