/* Opale — logiciel métier pour secrétariats médicaux.
   V3 : navigation horizontale par groupes, thème clair/sombre,
   couleur d'accent personnalisable par utilisatrice, pensé mobile. */

:root {
  --accent: #14618a;                                   /* pétrole — personnalisable */
  /* Repli pour les navigateurs sans color-mix() (avant 2023) : teintes fixes de l'accent par défaut.
     Les vraies teintes, calculées à partir de l'accent choisi, suivent dans le bloc @supports plus bas. */
  --accent-dark: #104c6c;
  --accent-light: #5b90ad;
  --accent-soft: #e5eef2;
  --accent-grad: linear-gradient(135deg, var(--accent), #1f7ea3);

  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --border: #e5eaf2;
  --line: rgba(229, 234, 242, .75);                    /* separateurs fins (lignes de listes) — repli, voir @supports */
  --text: #1c2b3a;
  --text-dim: #5f6f82;                                 /* 5,1:1 sur blanc (AA) — ex-#7d8b9d */
  --amber: #a9680a;                                    /* 4,5:1 sur blanc (AA) — ex-#d98a16, gardé en sombre */
  --amber-soft: #faf1e0;
  --green: #147a47;                                    /* 5,4:1 sur blanc (AA) — ex-#178a50, gardé en sombre */
  --green-soft: #e2f5ec;
  --red: #d33030;
  --red-soft: #fdebeb;
  --orange: #d97706;
  --orange-soft: #fdf3e3;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(23, 43, 66, .05), 0 6px 20px rgba(23, 43, 66, .05);
  --shadow-lift: 0 4px 10px rgba(23, 43, 66, .08), 0 12px 34px rgba(23, 43, 66, .09);
  --topbar-bg: rgba(255, 255, 255, .86);
  --hero-red-bg: linear-gradient(120deg, #fdecec, #fdf3ef);
  --hero-red-border: #f3ccc7;
  --hero-red-text: #78221d;
  --hero-green-bg: linear-gradient(120deg, #e2f5ec, #eef8ef);
  --hero-green-border: #c2e6d2;
  --hero-green-text: #135237;
}

[data-theme="dark"] {
  --bg: #0e151e;
  --surface: #16202c;
  --surface-2: #1b2735;
  --border: #263548;
  --accent-soft: #162736;                              /* repli sans color-mix() (voir @supports) */
  --line: rgba(38, 53, 72, .75);
  --text: #e7edf5;
  --text-dim: #8ea1b7;
  --amber: #d98a16;                                    /* teintes d'origine : déjà lisibles sur fond sombre */
  --green: #178a50;
  --amber-soft: #3a2d14;
  --green-soft: #143526;
  --red-soft: #3b1a1a;
  --orange-soft: #3a2a11;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  --shadow-lift: 0 4px 10px rgba(0, 0, 0, .35), 0 12px 34px rgba(0, 0, 0, .35);
  --topbar-bg: rgba(17, 25, 34, .88);
  --hero-red-bg: linear-gradient(120deg, #3b1a1a, #33201a);
  --hero-red-border: #5c2b28;
  --hero-red-text: #f3b7b2;
  --hero-green-bg: linear-gradient(120deg, #143526, #17321f);
  --hero-green-border: #245c40;
  --hero-green-text: #a9e2c4;
}

/* Teintes dérivées de l'accent (personnalisable) et séparateurs : calculés par color-mix() quand le
   navigateur le sait faire (Chrome 111+, Safari 16.2+, Firefox 113+) ; sinon les replis ci-dessus restent. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --accent-dark: color-mix(in srgb, var(--accent) 78%, #000);
    --accent-light: color-mix(in srgb, var(--accent) 70%, #fff);
    --accent-soft: color-mix(in srgb, var(--accent) 11%, var(--surface));
    --accent-grad: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #34b3d1));
    --line: color-mix(in srgb, var(--border) 75%, transparent);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px;
  transition: background .25s, color .25s;
}
button { font: inherit; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: var(--text); }
.muted { color: var(--text-dim); font-size: 12px; }
[hidden] { display: none !important; }
a { color: var(--accent); }
.grow { flex: 1; min-width: 0; }

/* ================= barre supérieure ================= */
#topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.topbar-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px clamp(22px, 2vw, 40px) 8px; max-width: none; margin: 0 auto;   /* toute la largeur de l'écran (21/10) */
}
#brand { font-size: 19px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.brand-gem { color: var(--amber); }
.topbar-spacer { flex: 1; }

#nav-groups { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
#nav-groups::-webkit-scrollbar { display: none; }
.nav-group {
  border: none; background: transparent; color: var(--text-dim);
  padding: 8px 15px; border-radius: 999px; font-weight: 700; font-size: 13.5px;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-group:hover { background: var(--accent-soft); color: var(--text); }
.nav-group.active { background: var(--accent-grad); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent); }
.nav-group .count {
  background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-group.active .count { background: rgba(255, 255, 255, .28); }

#subnav {
  display: flex; gap: 2px; padding: 0 clamp(22px, 2vw, 40px); max-width: none; margin: 0 auto;
  overflow-x: auto; scrollbar-width: none;
}
#subnav::-webkit-scrollbar { display: none; }
.subnav-item {
  border: none; background: transparent; color: var(--text-dim);
  padding: 9px 14px 11px; font-weight: 600; font-size: 13.5px; white-space: nowrap;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: 7px;
  transition: color .15s, border-color .15s;
}
.subnav-item:hover { color: var(--text); }
.subnav-item.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.subnav-item .count {
  background: var(--red); color: #fff; font-size: 10px; font-weight: 800;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.subnav-item .count.soft { background: var(--text-dim); }

#company-tabs { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); padding: 3px; border-radius: 999px; }
.company-tab {
  border: none; background: transparent; padding: 6px 14px; border-radius: 999px;
  font-weight: 700; color: var(--text-dim); font-size: 12.5px; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
.company-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.company-tab .dot { width: 8px; height: 8px; border-radius: 50%; }

#pointage { display: flex; align-items: center; gap: 6px; }
.clock-btn {
  border: none; border-radius: 999px; padding: 8px 15px; font-weight: 700; font-size: 12.5px;
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.clock-btn.start { background: var(--green-soft); color: var(--green); }
.clock-btn.start:hover { background: color-mix(in srgb, var(--green) 22%, var(--surface)); }
.clock-timer {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 7px 12px; border-radius: 999px; display: flex; align-items: center; gap: 8px;
}
.clock-timer .status-dot { margin: 0; }
.clock-mini {
  border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.clock-mini:hover { border-color: var(--accent); }

#me-chip { display: flex; align-items: center; gap: 10px; }
#me-chip .avatar { cursor: pointer; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-soft); }
#me-meta { line-height: 1.15; }
#me-name { font-weight: 800; font-size: 13px; }
#me-role { font-size: 11px; color: var(--text-dim); }
#btn-logout {
  border: none; background: var(--surface-2); color: var(--text-dim);
  width: 32px; height: 32px; border-radius: 10px; font-size: 15px;
}
#btn-logout:hover { background: var(--red-soft); color: var(--red); }

/* ================= contenu ================= */
#content { overflow-y: auto; }
#content-inner { max-width: none; margin: 0 auto; padding: 26px clamp(26px, 2.5vw, 56px) 60px; }   /* s'adapte à toutes les largeurs (21/10) */
#app { display: flex; flex-direction: row; height: 100vh; }
#main-col { display: flex; flex-direction: column; flex: 1; min-width: 0; height: 100vh; }
#view-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
#view-header h2 { font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
#view-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#view-body { display: flex; flex-direction: column; gap: 22px; animation: viewIn .25s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
section.block h4, #view-body h4 {
  margin-bottom: 11px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-dim); font-weight: 800;
}

/* ================= composants ================= */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.btn {
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 15px;
  font-weight: 700; background: var(--surface); color: var(--text); font-size: 13.5px;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.btn:where(:not(:disabled)):hover { background: var(--surface-2); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent-grad); border-color: transparent; color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-primary:where(:not(:disabled)):hover { filter: brightness(1.08); background: var(--accent-grad); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:where(:not(:disabled)):hover { background: var(--surface-2); color: var(--text); }
.btn-small { padding: 4px 11px; font-size: 12px; border-radius: 8px; }
.btn-green { background: var(--green-soft); border-color: transparent; color: var(--green); }
.btn-green:where(:not(:disabled)):hover { background: var(--green-soft); background: color-mix(in srgb, var(--green) 22%, var(--surface)); }
.btn-danger { background: var(--red-soft); border-color: transparent; color: var(--red); }
.btn-danger:where(:not(:disabled)):hover { background: var(--red-soft); background: color-mix(in srgb, var(--red) 18%, var(--surface)); }
.btn-block { width: 100%; }
/* Bouton désactivé (envoi en cours…) : grisé, curseur interdit, aucun effet de survol (voir :where(:not(:disabled))) */
.btn:disabled { opacity: .6; cursor: not-allowed; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.chip { font-size: 11px; font-weight: 700; padding: 2.5px 10px; border-radius: 999px; white-space: nowrap; }
.chip-red { background: var(--red-soft); color: var(--red); }
.chip-orange { background: var(--orange-soft); color: var(--orange); }
.chip-green { background: var(--green-soft); color: var(--green); }
.chip-blue { background: var(--accent-soft); color: var(--accent); }
.chip-amber { background: var(--amber-soft); color: var(--amber); }
.chip-gray { background: var(--surface-2); color: var(--text-dim); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.status-dot.pause { background: var(--orange); }
.status-dot.offline { background: #9aa8ba; opacity: .5; }

/* ================= accueil / alertes / stats ================= */
.hero-alert {
  border-radius: var(--radius); padding: 18px 22px; display: flex; align-items: center; gap: 16px;
  border: 1px solid; font-size: 15px; box-shadow: var(--shadow);
}
.hero-alert.red { background: var(--hero-red-bg); border-color: var(--hero-red-border); color: var(--hero-red-text); }
.hero-alert.green { background: var(--hero-green-bg); border-color: var(--hero-green-border); color: var(--hero-green-text); }
.hero-alert .big-ico { font-size: 27px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stat-card {
  padding: 17px 19px; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius); box-shadow: var(--shadow); text-align: left; font: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
button.stat-card { cursor: pointer; }
button.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.stat-card .num { font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.stat-card .lbl { color: var(--text-dim); font-size: 12px; margin-top: 3px; font-weight: 600; }
.stat-card.alert .num { color: var(--red); }
.stat-card.good .num { color: var(--green); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

/* ================= boîte de réception ================= */
.inbox-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 17px;
  border-bottom: 1px solid var(--border); cursor: pointer; background: var(--surface);
  transition: background .12s;
}
.inbox-row:last-child { border-bottom: none; }
.inbox-row:hover { background: var(--surface-2); }
.inbox-row.unread { background: var(--accent-soft); }
.inbox-row.unread .inbox-title { font-weight: 800; }
.inbox-row .inbox-title { font-weight: 600; font-size: 14px; }
.inbox-row .inbox-body { color: var(--text-dim); font-size: 13px; margin-top: 2px; white-space: pre-wrap; }
.inbox-row .inbox-body.clamp { max-height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.inbox-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; }
.inbox-dot.read { background: transparent; }
/* Boîte de réception (refonte 21/10) : familles colorées, journées, une seule ouverte à la fois */
.nb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 2px 0 14px; }
.nb-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.nb-filter { border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .12s, color .12s, border-color .12s; }
.nb-filter:hover { border-color: var(--accent); color: var(--accent); }
.nb-filter.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.nb-count { background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.nb-filter.active .nb-count { background: #fff; color: var(--accent); }
.nb-unread { font-size: 12.5px; }
.nb-day { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: 16px 4px 6px; }
.nb-day:first-child { margin-top: 0; }
.nb-group { overflow: hidden; }
.nb-item { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); cursor: pointer; background: var(--surface); transition: background .12s; outline: none; }
.nb-item:last-child { border-bottom: none; }
.nb-item:hover, .nb-item:focus-visible { background: var(--surface-2); }
.nb-item.unread { box-shadow: inset 4px 0 0 var(--accent); }
.nb-item.unread .nb-title { font-weight: 800; color: var(--text); }
.nb-item:not(.unread) .nb-title { color: var(--text); opacity: .82; }
.nb-item.open { background: var(--surface-2); cursor: default; }
.nb-lead { flex-shrink: 0; padding-top: 1px; }
.nb-ico { width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; }
.nb-main { flex: 1; min-width: 0; }
.nb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nb-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.nb-tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.nb-preview { color: var(--text-dim); font-size: 13px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-full { margin-top: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; }
.nb-meta { display: flex; gap: 6px; align-items: center; color: var(--text-dim); font-size: 12px; margin-top: 4px; }
.nb-sep { opacity: .6; }
.nb-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.nb-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; align-self: flex-start; min-height: 34px; }
.nb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.nb-open { opacity: 0; transition: opacity .12s; }
.nb-item:hover .nb-open, .nb-item:focus-visible .nb-open { opacity: 1; }
.nb-empty { padding: 36px 12px; }
.co-tessy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px; }
.sc-row.sc-off { opacity: .6; }
.ag-pill.sup { border-style: dashed; }
.ag-pill.sup.conge_attente { font-weight: 800; }
.ag-layers button { font-size: 12px; padding: 5px 10px; }
/* ===== Accueil apaisé (22/10) ===== */
.home .block h4, .home section.block > h4 { text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 700; color: var(--text) !important; margin: 0 0 8px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.home .block h4 .muted { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.home .block { margin-bottom: 18px; }
.home-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 22px 26px; border-radius: 20px; background: linear-gradient(135deg, var(--accent-soft), var(--surface)); border: 1px solid var(--border); margin-bottom: 14px; }
.home-hello { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.home-date { color: var(--text-dim); font-size: 14px; margin-top: 2px; }
.home-status { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; max-width: 520px; }
.home-status.green { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
.home-status.red { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, var(--border)); background: var(--red-soft); }
.home-status .muted { color: var(--text-dim); font-weight: 500; }
.home-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); font: inherit; color: var(--text-dim); cursor: pointer; text-align: left; transition: transform .15s var(--ease-out), box-shadow .15s; }
.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.kpi-n { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1.1; margin-top: 4px; }
.kpi-l { font-size: 12.5px; font-weight: 600; }
.kpi.is-alert .kpi-n { color: var(--red); } .kpi.is-warn .kpi-n { color: var(--orange); } .kpi.is-good .kpi-n { color: var(--green); }
.home-action { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); margin-bottom: 12px; font-size: 14px; }
.home-action.red { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 35%, var(--border)); }
.home-action.amber { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 22px; align-items: start; margin-top: 6px; }
.home-card { padding: 12px 16px; }
.home-lbl { display: inline-block; min-width: 86px; font-weight: 700; color: var(--text-dim); font-size: 12.5px; }
.home-empty { margin: 4px 0 0; }
.control-detail summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--text-dim); list-style: none; }
.control-detail summary::before { content: '▸ '; } .control-detail[open] summary::before { content: '▾ '; }
.control-detail[open] summary { margin-bottom: 8px; }
@media (max-width: 860px) { .home-grid { grid-template-columns: 1fr; } .home-hello { font-size: 24px; } }
.reply-quote { border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; padding: 8px 12px; margin: 4px 0 10px; }
.reply-quote-text { white-space: pre-wrap; font-size: 13px; line-height: 1.45; margin-top: 3px; max-height: 120px; overflow: auto; }
.tz-toread { border: 1px solid color-mix(in srgb, var(--red) 35%, var(--border)); border-radius: 14px; padding: 10px 12px 8px; margin-bottom: 10px; background: var(--surface); }
.tz-toread.just-read { opacity: .4; transition: opacity .3s; }
.tz-toread-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.qz-doc-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.qz-doc-row .pk { flex: 1 1 320px; }
.mail-full { margin: 4px 0 6px; }
.mail-full summary { cursor: pointer; font-size: 12.5px; color: var(--accent); font-weight: 600; }
.mail-body { white-space: pre-wrap; font-size: 13px; line-height: 1.5; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin-top: 6px; max-height: 320px; overflow: auto; }
.fiche-annonces { border-left: 4px solid var(--amber); padding-left: 12px; }
.fiche-annonces h4 { color: var(--amber); }
.ann-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 8px; background: var(--amber-soft); }
.ann-card.is-read { background: var(--surface); opacity: .85; }
.ann-body { white-space: pre-wrap; margin-top: 4px; font-size: 13.5px; }
.pres-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.pres-col { padding: 12px 14px; }
.pres-col-head { font-size: 14px; margin-bottom: 6px; }
.pres-person { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; border-radius: 8px; }
.pres-person:hover { background: var(--surface-2); }
.tz-changes { padding: 6px 10px; display: flex; flex-direction: column; }
.tz-change { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; border-bottom: 1px solid var(--border); border-radius: 8px; }
.tz-change:last-child { border-bottom: 0; }
.tz-change:hover { background: var(--surface-2); }
.assigned-fold summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; }
.assigned-fold summary::-webkit-details-marker { display: none; }
.assigned-fold summary::before { content: '▸'; font-size: 11px; color: var(--text-dim); }
.assigned-fold[open] summary::before { content: '▾'; }
.assigned-fold .assigned-find { margin: 8px 0 6px; max-width: 320px; }
.assigned-fold .assigned-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; max-height: 260px; overflow: auto; padding-right: 4px; }
.fiche-toread { border-left: 4px solid var(--red); padding-left: 12px; }
.fiche-toread h4 { color: var(--red); }
.nb-read { white-space: nowrap; }
.sup-people { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
#ag-target [data-t="managers"] { display: none; }
.ag-secs-row { margin: 4px 0 8px; }
.check-list { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 6px; }
.fb-list { display: flex; flex-direction: column; gap: 10px; }
.fb-card { padding: 14px 18px; }
.fb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fb-note { margin-top: 8px; display: flex; gap: 6px; align-items: center; }
.fb-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cr-action { color: var(--green); font-size: 13px; font-weight: 600; margin-top: 3px; display: flex; gap: 5px; align-items: center; }
.nb-blue { background: var(--accent-soft); color: var(--accent); }
.nb-green { background: var(--green-soft); color: var(--green); }
.nb-amber { background: var(--amber-soft); color: var(--amber); }
.nb-red { background: var(--red-soft); color: var(--red); }
.nb-purple { background: #efe8fb; color: #6d3fc4; }
.nb-teal { background: #e0f4f3; color: #0e7c78; }
.nb-slate { background: #eceff3; color: #556070; }
[data-theme="dark"] .nb-purple { background: #2a2140; color: #c3a8f5; }
[data-theme="dark"] .nb-teal { background: #10302f; color: #6fd3cf; }
[data-theme="dark"] .nb-slate { background: #243040; color: #aab4c2; }
@media (max-width: 720px) { .nb-open { display: none; } .nb-item { padding: 12px 12px; } }
.kind-ico {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
  background: var(--surface-2); border: 1px solid var(--border);
}

/* ================= fil d'activité ================= */
.feed-item { display: flex; gap: 12px; padding: 10px 4px; }
.feed-line { display: flex; flex-direction: column; align-items: center; }
.feed-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex-shrink: 0; }
.feed-dot.tache, .feed-dot.equipe { background: var(--green); }
.feed-dot.erreur { background: var(--red); }
.feed-dot.consigne { background: var(--amber); }
.feed-rail { flex: 1; width: 2px; background: var(--border); margin-top: 3px; }
.feed-text { line-height: 1.45; }

/* ================= discussion ================= */
.chat-layout { display: grid; grid-template-columns: 1fr 215px; gap: 18px; align-items: start; }
.chat-box { display: flex; flex-direction: column; height: calc(100vh - 275px); min-height: 340px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px 18px; }
.msg { display: flex; gap: 10px; padding: 6px 6px; border-radius: 10px; }
.msg:hover { background: var(--surface-2); }
.msg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.msg-author { font-weight: 700; font-size: 13.5px; }
.msg-time { color: var(--text-dim); font-size: 11px; }
.msg-content { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.msg.system .msg-content { color: var(--amber); font-weight: 600; }
.tag { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.tag.role-medecin { background: var(--surface-2); color: var(--text-dim); }
.tag.role-dirigeant { background: #f1eafd; color: #7c4fd8; }
.tag.role-superviseuse { background: #e2f3fb; color: #0b7cab; }
.tag.role-responsable { background: #fdeaf4; color: #d63384; }
[data-theme="dark"] .tag.role-dirigeant { background: #2c2344; color: #c4aef5; }
[data-theme="dark"] .tag.role-superviseuse { background: #12303e; color: #7cc8e8; }
[data-theme="dark"] .tag.role-responsable { background: #3c1c2d; color: #ef9ec5; }
.tag.broadcast { background: var(--amber-soft); color: var(--amber); }
.chat-composer { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--border); align-items: flex-end; }
.chat-composer textarea {
  flex: 1; resize: none; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 11px; padding: 10px 13px; max-height: 130px; line-height: 1.4;
}
.chat-composer textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.presence-panel { padding: 14px 16px; }
.presence-panel .member { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.presence-panel .member.offline { opacity: .45; }
.channel-tabs { display: flex; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.channel-tab {
  border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: 6px 14px; font-weight: 700; color: var(--text-dim); font-size: 12.5px;
  display: flex; align-items: center; gap: 6px;
}
.channel-tab.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ================= consignes ================= */
.consigne-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 15px 18px; margin-bottom: 10px; box-shadow: var(--shadow);
}
.consigne-card.unread-consigne { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 4%, var(--surface)); }
.consigne-card.expiree { opacity: .55; border-left-color: var(--text-dim); }
.consigne-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.consigne-top h5 { font-size: 14.5px; flex: 1; font-weight: 700; }
.consigne-version { font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; }
.consigne-body { margin: 8px 0; line-height: 1.55; white-space: pre-wrap; }
.consigne-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.consigne-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.read-chip { font-size: 11px; padding: 3px 10px; border-radius: 999px; font-weight: 800; background: var(--surface-2); color: var(--text-dim); }
.read-chip.ok { background: var(--green-soft); color: var(--green); }
.read-progress { font-size: 12px; color: var(--text-dim); }
.read-times { display: block; width: 100%; font-size: 11px; margin-top: 2px; }
.doctor-group-head { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; padding-bottom: 7px; border-bottom: 2px solid var(--border); }
.doctor-group-head h3 { font-size: 16px; font-weight: 800; }
.search-input {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; font-size: 14px; box-shadow: var(--shadow);
}
.search-input:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* ================= tâches / erreurs / mails / docs / notes ================= */
.task-card, .error-card, .mail-card {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 13px 16px; margin-bottom: 9px;
  display: flex; gap: 12px; align-items: flex-start; box-shadow: var(--shadow);
}
.task-card.done { border-left-color: var(--green); opacity: .5; }
.task-card.late { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 4%, var(--surface)); }
.task-title { font-weight: 700; font-size: 14px; }
.task-details { margin: 4px 0; line-height: 1.45; white-space: pre-wrap; }
.error-card { border-left-color: var(--red); }
.error-card.resolue { border-left-color: var(--green); opacity: .55; }
.error-kind { font-weight: 700; font-size: 14px; }
.error-desc { margin: 4px 0; line-height: 1.45; }
.mail-card { border-left-color: var(--amber); }
.mail-body-preview { margin-top: 5px; font-size: 13px; color: var(--text-dim); white-space: pre-wrap; max-height: 58px; overflow: hidden; line-height: 1.4; }
.mail-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.doc-row {
  display: flex; align-items: center; gap: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 11px 16px; margin-bottom: 8px; box-shadow: var(--shadow);
}
.doc-row a { color: var(--text); text-decoration: none; }
.doc-row a:hover { color: var(--accent); text-decoration: underline; }
.doc-icon { font-size: 20px; }
.note-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px 18px; margin-bottom: 10px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.note-card.row-click:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.note-head { display: flex; align-items: center; gap: 11px; }
.note-score { font-size: 23px; font-weight: 800; }
.note-bar { height: 7px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.note-bar-fill { height: 100%; border-radius: 4px; transition: width .3s; }
.note-doctors { display: flex; gap: 6px; flex-wrap: wrap; }

/* ================= médecins & fiches ================= */
.doctor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.doctor-card {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); font: inherit; color: var(--text); cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.doctor-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.doctor-name { font-weight: 800; font-size: 14.5px; }
.fiche-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; flex-wrap: wrap; }
.fiche-head h3 { font-weight: 800; }
.info-rows { padding: 8px 20px; }
.info-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--surface-2); align-items: baseline; }
.info-row:last-child { border-bottom: none; }
.info-label { min-width: 115px; font-size: 11px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.codes { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--surface-2); border-radius: 9px; padding: 10px 13px; white-space: pre-wrap; flex: 1; }

/* ================= graphiques ================= */
.chart-card { padding: 17px 19px; }
.chart-title { font-size: 11px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 15px; }
.chart-svg { width: 100%; height: auto; display: block; }
.ct-grid { stroke: var(--border); stroke-width: .7; stroke-dasharray: 3 4; opacity: .8; }
.ct-axis { stroke: var(--border); stroke-width: 1.2; }
.ct-val { font-size: 10.5px; font-weight: 800; fill: var(--text-dim); font-family: inherit; }
.ct-lbl { font-size: 10px; fill: var(--text-dim); font-family: inherit; }
.bar-g { transform-box: fill-box; transform-origin: center bottom; animation: barGrow .5s ease backwards; }
@keyframes barGrow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.bar-g:hover .bar { filter: brightness(1.2); }
.area-line { filter: drop-shadow(0 3px 5px rgba(20, 90, 130, .3)); }
.area-fill, .area-line { animation: fadeChart .7s ease backwards; }
@keyframes fadeChart { from { opacity: 0; } to { opacity: 1; } }
.donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut-svg { width: 138px; height: 138px; flex-shrink: 0; }
.donut-seg { animation: fadeChart .6s ease backwards; }
.donut-seg:hover { filter: brightness(1.15); }
.donut-total { font-size: 21px; font-weight: 800; fill: var(--text); font-family: inherit; }
.donut-sub { font-size: 8.5px; fill: var(--text-dim); font-family: inherit; text-transform: uppercase; letter-spacing: .08em; }
.donut-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 7px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.hbar-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 9px; }
.hbar-row[data-hbar]:hover { background: var(--surface-2); }
.hbar-label { min-width: 130px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.hbar-track { flex: 1; height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 6px; transition: width .3s; }
.hbar-val { min-width: 74px; text-align: right; font-size: 12.5px; font-weight: 800; color: var(--text-dim); }
.row-click { cursor: pointer; }
tr.row-click:hover td { background: var(--surface-2); }
.read-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 17px;
  border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap;
}
.read-row:last-child { border-bottom: none; }

/* ================= icônes SVG ================= */
.ico-svg { vertical-align: -3px; flex-shrink: 0; }
.nav-group .ico-svg, .subnav-item .ico-svg { vertical-align: -3.5px; }
.kind-ico .ico-svg { vertical-align: 0; color: var(--accent); }
.btn .ico-svg { vertical-align: -3px; margin-right: 2px; }
.company-tab svg { flex-shrink: 0; }

/* ================= blocs « Mes médecins » ================= */
.doctor-block {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.doctor-block.has-new { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 9%, transparent), var(--shadow); }
.doctor-block-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: none; background: transparent; padding: 15px 18px; text-align: left; font: inherit;
}
.doctor-block-head:hover { background: var(--surface-2); }
.doctor-block-head .doctor-name { display: block; font-size: 15px; }
.doctor-block-head .db-sub { display: block; margin-top: 1px; }
.doc-avatar {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.doctor-block.has-new .doc-avatar { background: var(--red-soft); color: var(--red); }
.db-caret { color: var(--text-dim); font-size: 13px; }
.assigned-avatars { display: flex; }
.assigned-avatars .avatar { margin-left: -7px; box-shadow: 0 0 0 2px var(--surface); }
.assigned-avatars .avatar:first-child { margin-left: 0; }
.doctor-block-body { padding: 4px 16px 14px; border-top: 1px solid var(--border); }
.db-tools { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0 8px; }
/* Halo qui pulse : anneau animé en transform/opacity (composité, pas de repeint à chaque image) */
.chip.pulse { position: relative; }
.chip.pulse::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--red); opacity: 0; pointer-events: none; animation: pulseChip 1.6s ease-in-out infinite; }
@keyframes pulseChip {
  0%, 100% { transform: scale(1); opacity: .45; }
  50% { transform: scale(1.25); opacity: 0; }
}
.new-ribbon {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  background: var(--red); color: #fff; border-radius: 6px; padding: 3px 9px;
}

/* ================= bandeau d'alerte consignes ================= */
#topbar.alert {
  background: linear-gradient(90deg, #c22525, #8f1919);
  border-bottom-color: #7d1515;
}
#topbar.alert #brand, #topbar.alert .nav-group, #topbar.alert .subnav-item,
#topbar.alert #me-name, #topbar.alert #me-role { color: #ffe1e1; }
#topbar.alert .nav-group:hover { background: rgba(255, 255, 255, .14); color: #fff; }
#topbar.alert .nav-group.active { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: none; }
#topbar.alert .subnav-item.active { color: #fff; border-bottom-color: transparent; background-image: linear-gradient(#fff, #fff); }
#topbar.alert .nav-group .count { background: #fff; color: #b02020; }
#topbar.alert .subnav-item .count { background: #fff; color: #b02020; }
#alert-strip {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; border: none; cursor: pointer;
  background: rgba(0, 0, 0, .22); color: #fff;
  font: inherit; font-weight: 800; font-size: 13.5px; padding: 8px 14px;
  animation: stripPulse 1.6s ease-in-out infinite;
}
#alert-strip:hover { background: rgba(0, 0, 0, .34); }
@keyframes stripPulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

/* ================= plein écran nouvelle consigne ================= */
#consigne-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(circle at 50% 30%, rgba(200, 40, 40, .97), rgba(120, 15, 15, .985));
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: viewIn .3s ease;
}
.co-box { text-align: center; color: #fff; max-width: 480px; }
.co-bell { animation: bellRing 1.1s ease infinite; display: inline-block; }
@keyframes bellRing {
  0%, 100% { transform: rotate(0); } 12% { transform: rotate(-14deg); }
  24% { transform: rotate(11deg); } 36% { transform: rotate(-7deg); } 48% { transform: rotate(4deg); } 60% { transform: rotate(0); }
}
.co-count {
  font-size: 58px; font-weight: 800; line-height: 1; margin: 6px 0 2px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .3);
}
.co-box h2 { font-size: 25px; font-weight: 800; margin-bottom: 8px; }
.co-box p { opacity: .92; line-height: 1.5; margin-bottom: 22px; font-size: 15px; }
.co-go {
  background: #fff !important; color: #b02020 !important; border: none !important;
  font-size: 16px !important; font-weight: 800 !important; padding: 13px 26px !important;
  border-radius: 999px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.co-go:hover { transform: translateY(-2px); }
.co-later {
  display: block; margin: 16px auto 0; background: none; border: none;
  color: rgba(255, 255, 255, .65); font-size: 12.5px; text-decoration: underline; cursor: pointer;
}
.co-later:hover { color: #fff; }

/* ================= sécurité, membres, voir-comme ================= */
#brand svg { vertical-align: -6px; }
#imp-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(90deg, #7c4fd8, #4b2f8f); color: #fff;
  padding: 8px 16px; font-size: 13px; font-weight: 600; flex-wrap: wrap;
}
#imp-banner .btn { background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff; }
#imp-banner .btn:hover { background: rgba(255, 255, 255, .28); }
.member-hero { display: flex; gap: 14px; align-items: flex-start; }
.member-hero .avatar { width: 52px; height: 52px; font-size: 19px; }
.member-hero-name { font-size: 19px; font-weight: 800; }
.member-hero-sub { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.member-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.member-actions .btn { text-align: left; }
.sec-list { display: flex; flex-direction: column; gap: 9px; }
.sec-item { display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; font-size: 13.5px; }
.sec-item.ok .ico-svg { color: var(--green); margin-top: 2px; }
.sec-item.warn { color: var(--amber); font-weight: 600; }
.sec-item.warn .ico-svg { margin-top: 2px; }
.assign-row { display: flex; align-items: center; gap: 10px; }
.assign-row select { width: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; }

/* ================= intégrations ================= */
#view-body input[data-key] {
  display: block; width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 9px 12px; margin-bottom: 4px;
}
#view-body input[data-key]:focus { outline: 2px solid var(--accent); border-color: transparent; }
#view-body .card > label, #view-body .card div > label {
  display: block; font-size: 12px; font-weight: 800; color: var(--text-dim); margin: 12px 0 5px;
}

/* ================= appels : étoiles ================= */
.stars { color: var(--amber); letter-spacing: 1px; font-size: 14px; }
.stars-off { color: var(--border); }
.star-picker { display: flex; gap: 6px; }
.star-btn { font-size: 30px; line-height: 1; background: none; border: none; color: var(--border); cursor: pointer; transition: transform .1s, color .1s; }
.star-btn.on { color: var(--amber); }
.star-btn:hover { transform: scale(1.15); }

/* ================= planning hebdo ================= */
.shift-grid td { vertical-align: top; min-width: 96px; }
.shift-grid .today-col { background: var(--accent-soft); }
.shift-cell.clickable { cursor: pointer; }
.shift-cell.clickable:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.shift-chip {
  display: inline-block; background: var(--accent-soft); color: var(--accent);
  font-weight: 700; font-size: 11.5px; border-radius: 7px; padding: 3px 8px; margin: 2px 2px 2px 0;
  white-space: nowrap;
}
.shift-chip.leave { background: var(--amber-soft); color: var(--amber); }
.shift-chip.sortant { background: var(--amber-soft); color: var(--amber); }

/* ================= présences (timeline) ================= */
.pres-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--surface-2); }
.pres-row:last-child { border-bottom: none; }
.pres-scale { border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.pres-label { min-width: 190px; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.pres-track { flex: 1; position: relative; height: 18px; background: var(--surface-2); border-radius: 6px; }
.pres-scale .pres-track { background: transparent; height: 14px; }
.pres-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; color: var(--text-dim); }
.pres-seg { position: absolute; top: 3px; height: 12px; border-radius: 4px; }
.pres-seg.on { background: var(--green); opacity: .85; }
.pres-seg.pause { background: var(--orange); top: 5px; height: 8px; }
.pres-seg.live { animation: stripPulse 1.4s ease-in-out infinite; }
.pres-total { min-width: 150px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--text-dim); display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
/* Téléphone : nom et total sur une ligne, la barre en dessous sur toute la largeur */
@media (max-width: 600px) {
  .pres-row { flex-wrap: wrap; gap: 4px 12px; }
  .pres-label, .pres-total { min-width: 0; }
  .pres-label { flex: 1 1 auto; }
  .pres-total { flex: 0 0 auto; }
  .pres-track { flex: 1 0 100%; order: 3; }
}

/* ================= cockpit global ================= */
.cockpit-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.cockpit-row:last-child { border-bottom: none; }
.cockpit-row > svg { flex-shrink: 0; margin-top: 1px; }

/* ================= publier ================= */
.publish-choices { display: flex; flex-direction: column; gap: 10px; }
.publish-choice {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 14px 16px; font: inherit; color: var(--text);
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.publish-choice:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-lift); }

/* ================= rédaction ================= */
.rd-textarea {
  width: 100%; min-height: 170px; resize: vertical;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px;
  padding: 13px 15px; line-height: 1.55; font-size: 14.5px;
}
.rd-textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.rd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.rd-result { padding: 0; overflow: hidden; }
.rd-result-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.rd-result-text { padding: 16px 18px; line-height: 1.6; white-space: pre-wrap; font-size: 14.5px; }

/* ================= mémo de formation ================= */
.memo-step {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 17px; margin-bottom: 9px; box-shadow: var(--shadow);
}
.memo-step.seen { border-left: 4px solid var(--green); }
.memo-num {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.memo-step.seen .memo-num { background: var(--green-soft); color: var(--green); }
.memo-title { font-weight: 700; font-size: 14.5px; }
.memo-body { margin-top: 4px; line-height: 1.5; white-space: pre-wrap; }

/* ================= RH : pointage, congés, planning ================= */
.clock-hero {
  display: flex; align-items: center; gap: 20px; padding: 22px 26px; flex-wrap: wrap;
}
.clock-hero .clock-big { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.clock-hero .clock-sub { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.clock-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.leave-card {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--amber);
  border-radius: var(--radius); padding: 13px 16px; margin-bottom: 9px;
  display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow); flex-wrap: wrap;
}
.leave-card.accepte { border-left-color: var(--green); }
.leave-card.refuse { border-left-color: var(--red); opacity: .6; }
.planning-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.planning-dow { text-align: center; font-size: 10.5px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; padding: 4px 0; }
.planning-day {
  min-height: 76px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px 7px; font-size: 11px;
}
.planning-day.off { background: transparent; border-style: dashed; opacity: .45; }
.planning-day.today { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.planning-day .pd-num { font-weight: 800; color: var(--text-dim); margin-bottom: 4px; }
.planning-day.today .pd-num { color: var(--accent); }
.planning-leave {
  display: flex; align-items: center; gap: 4px; border-radius: 6px; padding: 2px 5px;
  margin-bottom: 3px; font-weight: 700; font-size: 10.5px;
  background: var(--amber-soft); color: var(--amber); overflow: hidden; white-space: nowrap;
}
.planning-leave.maladie { background: var(--red-soft); color: var(--red); }
.planning-nav { display: flex; align-items: center; gap: 12px; }
.planning-nav h3 { font-size: 16px; font-weight: 800; min-width: 150px; text-align: center; text-transform: capitalize; }

/* ================= préférences ================= */
.theme-row { display: flex; gap: 8px; }
.theme-opt {
  flex: 1; border: 2px solid var(--border); border-radius: 12px; padding: 12px 8px;
  background: var(--surface); text-align: center; font-weight: 700; font-size: 13px;
}
.theme-opt.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.accent-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.accent-swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; padding: 0; }
.accent-swatch.selected { border-color: var(--text); }

/* ================= tables ================= */
table.data-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.data-table th, .data-table td { text-align: left; padding: 11px 15px; font-size: 13.5px; }
.data-table th { background: var(--surface-2); color: var(--text-dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.data-table tr + tr td { border-top: 1px solid var(--border); }
/* Téléphone : un tableau large défile dans son cadre au lieu de faire glisser toute la vue */
@media (max-width: 700px) {
  table.data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data-table tbody { display: table; width: 100%; border-collapse: collapse; }
}

/* ================= modale & formulaires ================= */
#modal-backdrop { position: fixed; inset: 0; background: rgba(10, 22, 32, .5); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 14px; }
#modal { background: var(--surface); border-radius: 18px; width: min(560px, 96vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lift); animation: viewIn .2s ease; }
#modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border); }
#modal-header h3 { font-weight: 800; }
#modal-body { padding: 20px 22px; overflow-y: auto; }
#modal-body label { display: block; font-size: 12.5px; font-weight: 800; color: var(--text-dim); margin: 14px 0 5px; }
#modal-body input[type=text], #modal-body input[type=password], #modal-body input[type=date], #modal-body input[type=time],
#modal-body input[type=email], #modal-body input[type=number], #modal-body input[type=tel], #modal-body textarea, #modal-body select {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px;
}
#modal-body input:focus, #modal-body textarea:focus, #modal-body select:focus { outline: 2px solid var(--accent); border-color: transparent; }
#modal-body textarea { min-height: 90px; resize: vertical; }
#modal-body .modal-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 8px; }
#modal-body .form-error { color: var(--red); font-size: 13px; margin-top: 10px; font-weight: 700; }
.check-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 14px; }
.check-group-label { font-weight: 800; margin-top: 10px; font-size: 13px; }
.date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.team-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 14px; }

/* ================= login ================= */
.login-body {
  display: flex; justify-content: center; min-height: 100vh; padding: 20px;
  background: linear-gradient(150deg, #0e2a3a 0%, #14618a 55%, #2189b4 100%);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.login-card { background: #fff; color: #1c2b3a; border-radius: 22px; padding: 34px 36px 26px; width: min(450px, 96vw); box-shadow: 0 30px 80px rgba(6, 25, 36, .5); margin: auto 0; height: fit-content; }
.login-brand { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.login-brand .brand-gem { color: #d98a16; }
.login-sub { color: #7d8b9d; margin: 4px 0 20px; }
.login-card label { display: block; font-size: 12.5px; font-weight: 800; color: #7d8b9d; margin: 13px 0 5px; }
.login-card input { width: 100%; background: #f3f5f9; border: 1px solid #e5eaf2; border-radius: 10px; padding: 11px 13px; }
.login-card input:focus { outline: 2px solid #14618a; border-color: transparent; }
.login-error { color: #d33030; font-size: 13px; margin-top: 10px; font-weight: 700; }
.demo-grid { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.demo-user {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px;
  border-radius: 13px; border: 1px solid #e5eaf2; background: #f7f9fc; text-align: left;
  transition: transform .12s, box-shadow .12s;
}
.demo-user:hover { background: #fff; border-color: #14618a; box-shadow: 0 6px 18px rgba(20, 97, 138, .2); transform: translateY(-1px); }
.demo-user .du-name { font-weight: 800; font-size: 14px; }
.demo-user .du-sub { font-size: 11.5px; color: #7d8b9d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-user .du-go { color: #14618a; font-weight: 800; font-size: 17px; }
.role-title { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #7d8b9d; margin: 14px 2px 3px; }
details.pw { margin-top: 20px; border-top: 1px solid #e5eaf2; padding-top: 12px; }
details.pw summary { cursor: pointer; color: #7d8b9d; font-size: 13px; font-weight: 700; }

/* ================= responsive (mobile-first en tête) ================= */
@media (max-width: 980px) {
  .two-col { grid-template-columns: 1fr; }
  .chat-layout { grid-template-columns: 1fr; }
  .presence-panel { display: none; }
}
/* ===== Migration O.C.E.A.N : fiches clients, base de connaissances, coffre, planning ===== */
.doc-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.search-wrap { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.search-wrap .ico-svg { position: absolute; left: 11px; color: var(--text-dim); pointer-events: none; }
.search-wrap .search-input { width: 100%; padding-left: 34px; margin: 0; }
.doc-toolbar select { margin: 0; max-width: 240px; }
.doctor-card.unlisted { opacity: .62; }
.doc-label { font-size: 11.5px; color: var(--text-dim); letter-spacing: .02em; margin-top: 2px; }
.doc-side { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.fiche-client { flex-wrap: wrap; }
.fiche-greeting { font-size: 20px; font-weight: 700; color: var(--accent); letter-spacing: -.01em; margin-bottom: 2px; }
.fiche-cta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.fiche-cta .btn { text-decoration: none; }
.coord-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0; padding: 4px 6px; }
.coord-cell { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.coord-cell .info-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: 600; }
.coord-wide { grid-column: 1 / -1; }
.yes { color: var(--green); font-weight: 700; }
.no { color: var(--red); font-weight: 700; }
.fiche-sections { display: grid; gap: 8px; }
.fiche-section { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; }
.fiche-section summary { cursor: pointer; padding: 12px 0; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px; }
.fiche-section summary::before { content: '›'; display: inline-block; transition: transform .15s; color: var(--accent); font-size: 18px; }
.fiche-section[open] summary::before { transform: rotate(90deg); }
.fiche-section .kb-content { padding: 0 0 14px; }
.kb-content { line-height: 1.55; font-size: 14px; overflow-x: auto; }
.kb-content h3, .kb-content h4, .kb-content h5 { margin: 16px 0 6px; color: var(--accent); }
.kb-content h4:first-child { margin-top: 0; }
.kb-content ul, .kb-content ol { padding-left: 22px; margin: 6px 0; }
.kb-content li { margin: 3px 0; }
.kb-content table { border-collapse: collapse; margin: 8px 0; width: 100%; }
.kb-content td, .kb-content th { border: 1px solid var(--line); padding: 6px 9px; vertical-align: top; }
.kb-content td:first-child { font-weight: 600; }
.kb-content img { max-width: 100%; height: auto; border-radius: 8px; }
.kb-content a { color: var(--accent); }
.kb-content p { margin: 6px 0; }
.kb-editor { min-height: 220px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); outline: none; }
.kb-editor:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sec-edit { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--surface-2, var(--bg)); }
.sec-edit-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.sec-edit-head .sec-title { flex: 1; margin: 0; font-weight: 700; }
.sec-body { min-height: 60px; border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface); outline: none; }
.sec-body:focus { border-style: solid; border-color: var(--accent); }
.kb-layout { display: grid; grid-template-columns: 290px 1fr; gap: 16px; align-items: start; }
.kb-side { padding: 4px 0 8px; max-height: calc(100vh - 220px); overflow: auto; position: sticky; top: 8px; }
.kb-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 700; padding: 12px 14px 4px; }
.kb-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 14px; font: inherit; color: var(--text); cursor: pointer; border-left: 3px solid transparent; }
.kb-item:hover { background: var(--accent-soft); }
.kb-item.active { border-left-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.kb-page { padding: 20px 24px; }
.kb-page-head { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.kb-page-head h3 { margin: 0 0 4px; }
.kb-empty { padding: 50px 30px; text-align: center; color: var(--text-dim); }
.kb-empty .ico-svg { color: var(--accent); margin-bottom: 8px; }
.pin-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pin-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.pin-chip:hover { border-color: var(--accent); color: var(--accent); }
.vault-table td { vertical-align: middle; }
.vault-login { font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: var(--accent-soft); padding: 2px 7px; border-radius: 6px; }
.vault-mask { letter-spacing: 2px; color: var(--text-dim); }
.type-legend { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.type-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.type-row input[type=text] { flex: 1; margin: 0; }
.type-row input[type=color] { width: 36px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; }
.type-row select { margin: 0; }
.shift-chip small { font-size: 10px; opacity: .8; }
.doc-cat > summary { cursor: pointer; list-style: none; }
.doc-cat > summary h4 { display: inline-flex; gap: 6px; align-items: center; }
.doc-cat > summary h4::before { content: '›'; color: var(--accent); display: inline-block; transition: transform .15s; }
.doc-cat[open] > summary h4::before { transform: rotate(90deg); }
@media (max-width: 860px) {
  .kb-layout { grid-template-columns: 1fr; }
  .kb-side { position: static; max-height: 260px; }
  .fiche-cta { align-items: flex-start; }
}
@media print {
  /* Papier toujours clair, quel que soit le thème à l'écran : texte sombre sur fond blanc (css-2) */
  :root, :root[data-theme="dark"] { --bg: #fff; --surface: #fff; --surface-2: #fff; --text: #000; --text-dim: #555; --border: #bbb; --topbar-bg: #fff; --shadow: none; --shadow-lift: none; }
  /* Le contenu ne défile plus dans une boîte à hauteur d'écran : toutes les pages sortent (css-1) */
  html, body, #app { height: auto; }
  #content { overflow: visible; }
  #topbar, #subnav, #view-actions, .kb-side, .btn, #consigne-overlay, #alert-strip,
  #mobile-tabs, #toasts, #imp-banner, #day-moment, .person-menu, #modal-backdrop { display: none !important; }
  .fiche-section { break-inside: avoid; }
  .fiche-section:not([open]) > *:not(summary) { display: block !important; }
  details.fiche-section .kb-content { display: block !important; }
}

/* ===== Recherche globale, outils, PEMS du jour ===== */
.topbar-spacer { display: flex; justify-content: center; align-items: center; min-width: 0; }
#global-search { position: relative; width: min(420px, 100%); }
#gs-input { width: 100%; margin: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 13px; }
#gs-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
#gs-results { position: absolute; top: calc(100% + 6px); right: 0; left: auto; width: max(100%, 380px); max-width: calc(100vw - 20px); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.18); z-index: 60; max-height: 70vh; overflow: auto; padding: 6px; }
.gs-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 700; padding: 8px 10px 3px; }
.gs-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; border-radius: 9px; padding: 7px 10px; font: inherit; color: var(--text); cursor: pointer; }
.gs-item:hover, .gs-item.active { background: var(--accent-soft); }
.gs-item .ico-svg { color: var(--accent); flex: none; }
.gs-item .muted { font-size: 12px; }
.gs-empty { padding: 14px; color: var(--text-dim); font-size: 13px; }
.tools-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; font-size: 13px; }
.tool-btn:hover { border-color: var(--accent); color: var(--accent); }
.tool-btn .tool-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.today-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.doctor-card .card-agenda { margin-top: 4px; }

/* ===== Disponibilités : calendrier du mois ===== */
.dispo-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dispo-dow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: 700; text-align: center; padding: 4px 0; }
.dispo-cell { min-height: 58px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 5px 6px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; font: inherit; color: var(--text); cursor: pointer; text-align: left; position: relative; }
.dispo-cell:hover:not(:disabled) { border-color: var(--accent); }
.dispo-cell.empty { border: 0; background: none; cursor: default; }
.dispo-cell.we { background: var(--bg); }
.dispo-cell.has { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.dispo-num { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.dispo-cell.has .dispo-num { color: var(--green); }
.dispo-slot { font-size: 11.5px; font-weight: 600; background: var(--surface); border-radius: 6px; padding: 1px 5px; }
.dispo-add { position: absolute; right: 7px; top: 4px; color: var(--text-dim); opacity: 0; font-weight: 700; }
.dispo-cell:hover .dispo-add { opacity: 1; }
.dispo-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.dispo-tools input { flex: 1 1 240px; margin: 0; }
.chip-x { border: 0; background: none; font: inherit; cursor: pointer; color: inherit; opacity: .7; padding: 0 2px; }
.chip-x:hover { opacity: 1; color: var(--red); }
.dispo-team th, .dispo-team td { padding: 4px 5px; font-size: 11.5px; text-align: center; }
.dispo-team th.we { color: var(--text-dim); }
.dispo-team td.dispo-td.ok { background: var(--green-soft); color: var(--green); font-weight: 600; }
.dispo-team td:first-child { text-align: left; }
@media (max-width: 640px) { .dispo-cell { min-height: 44px; padding: 3px 4px; } .dispo-slot { font-size: 10px; } }

/* ===== Mon dossier : pièces à rendre ===== */
.req-row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.req-row:last-child { border-bottom: 0; }
.req-ico { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: var(--bg); color: var(--text-dim); flex: none; }
.req-row.done .req-ico { background: var(--green-soft); color: var(--green); }
.req-row.late .req-ico { background: var(--red-soft); color: var(--red); }
.req-row.soon .req-ico { background: var(--amber-soft); color: var(--amber); }
.req-row.done { opacity: .7; }
.dispo-slot.ok { background: var(--green); color: #fff; }
.dispo-team td.dispo-td.pending { background: var(--amber-soft); }
.val-btn { display: block; width: 100%; border: 1px dashed var(--amber); background: var(--surface); color: var(--text); border-radius: 6px; font: inherit; font-size: 11px; font-weight: 600; padding: 2px 4px; margin: 1px 0; cursor: pointer; }
.val-btn:hover { background: var(--green-soft); border-color: var(--green); color: var(--green); }

/* ===== Poste de contrôle (direction) ===== */
.control-panel h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.control-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.control-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.control-detail { padding: 10px 16px; display: grid; gap: 8px; }
.control-line { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.control-line strong { margin-right: 4px; }
button.chip.row-click { border: 0; font: inherit; font-size: 12px; cursor: pointer; }
.dispo-slot.ko { background: var(--red-soft); color: var(--red); text-decoration: line-through; }
.dispo-team td.dispo-td.ko { background: var(--red-soft); color: var(--red); }
.val-row, .val-done, .val-ko { display: flex; align-items: center; gap: 2px; justify-content: center; }
.val-row .val-btn { flex: 1; }
.val-done { color: var(--green); font-weight: 600; }
.val-ko { color: var(--red); font-weight: 600; text-decoration: line-through; }
.val-ko .chip-x, .val-done .chip-x { text-decoration: none; }
.cover-row td { background: var(--bg); font-size: 12px; }
.cover-row td.ok { background: var(--green-soft); }
.day-build { font-size: 10.5px; padding: 1px 6px; margin-top: 3px; }
.avail-hint { margin: 6px 0 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.build-list { display: grid; gap: 6px; max-height: 50vh; overflow: auto; margin-top: 8px; }
.build-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.build-row.done { opacity: .7; }
.build-times { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.build-times input[type=time], #modal-body .build-times input[type=time] { margin: 0; width: 96px; padding: 4px 6px; }
.group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.group-col { padding: 14px 16px; }
.group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }

/* ===== Mails : proposition en attente ===== */
.mail-card.pending { border-left: 3px solid var(--amber); }

.icon-btn { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); width: 36px; height: 36px; border-radius: 12px; display: none; align-items: center; justify-content: center; flex: none; }
.lbl-short { display: none; }
#mobile-tabs { display: none; }

/* ===== Écrans moyens (tablette, petit portable) : la barre reste sur une ligne, libellés compacts ===== */
@media (max-width: 1100px) {
  html:not(.layout-desktop) .nav-group { padding: 8px 11px; }
  html:not(.layout-desktop) #me-meta { display: none; }
  html:not(.layout-desktop) #global-search { width: min(260px, 100%); }
}
@media (max-width: 900px) {
  html:not(.layout-desktop) .nav-group .nav-label { display: none; }
  html:not(.layout-desktop) .nav-group { padding: 8px 12px; gap: 0; }
  html:not(.layout-desktop) .nav-group .count { margin-left: 4px; }
  html:not(.layout-desktop) .topbar-row { gap: 10px; }
  html:not(.layout-desktop) .company-tab:not(.active) .co-name { display: none; }
  html:not(.layout-desktop) .lbl-long { display: none; }
  html:not(.layout-desktop) .lbl-short { display: inline; }
  html:not(.layout-desktop) #global-search { width: min(220px, 100%); }
}

/* ===== Téléphone : en-tête compact, onglets en bas, contenu plein écran ===== */
@media (max-width: 760px) {
  html:not(.layout-desktop) .topbar-row { padding: 6px 10px; gap: 8px; flex-wrap: nowrap; }
  html:not(.layout-desktop) #brand { font-size: 0; width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; }
  html:not(.layout-desktop) #brand .brand-gem { font-size: 13px; color: #fff; }
  html:not(.layout-desktop) #nav-groups { display: none; }
  html:not(.layout-desktop) .topbar-spacer { flex: 1; }
  html:not(.layout-desktop) #global-search { display: none; }
  html:not(.layout-desktop) #topbar.search-open #global-search { display: block; position: absolute; left: 10px; right: 10px; top: 52px; width: auto; z-index: 61; }
  html:not(.layout-desktop) #topbar.search-open #gs-input { background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
  html:not(.layout-desktop) .icon-btn { display: inline-flex; }
  html:not(.layout-desktop) #topbar.search-open #gs-toggle { background: var(--accent-soft); color: var(--accent); }
  html:not(.layout-desktop) #company-tabs { padding: 2px; }
  html:not(.layout-desktop) .company-tab { padding: 5px 9px; font-size: 12px; }
  html:not(.layout-desktop) .company-tab:not(.active) .co-name { display: none; }
  html:not(.layout-desktop) #pointage .clock-btn { padding: 7px 11px; font-size: 12px; }
  html:not(.layout-desktop) .lbl-long { display: none; }
  html:not(.layout-desktop) .lbl-short { display: inline; }
  html:not(.layout-desktop) .clock-timer { padding: 6px 9px; font-size: 12px; }
  html:not(.layout-desktop) .clock-timer .clock-lbl { display: none; }
  html:not(.layout-desktop) #me-chip { gap: 6px; }
  html:not(.layout-desktop) #me-meta, html:not(.layout-desktop) #btn-logout { display: none; }
  html:not(.layout-desktop) #subnav { padding: 0 8px; gap: 0; }
  html:not(.layout-desktop) .subnav-item { padding: 8px 11px 10px; font-size: 13px; }
  html:not(.layout-desktop) #alert-strip { font-size: 12px; padding: 6px 12px; }
  html:not(.layout-desktop) #content-inner { padding: 14px 12px calc(84px + env(safe-area-inset-bottom)); }
  html:not(.layout-desktop) #view-header { margin-bottom: 14px; }
  html:not(.layout-desktop) #view-header h2 { font-size: 20px; }
  html:not(.layout-desktop) #view-actions { width: 100%; }
  html:not(.layout-desktop) #view-actions .btn { flex: 1 1 auto; justify-content: center; }
  html:not(.layout-desktop) .stat-row { grid-template-columns: 1fr 1fr; }
  html:not(.layout-desktop) .planning-day { min-height: 58px; }
  html:not(.layout-desktop) .hbar-label { min-width: 90px; }
  html:not(.layout-desktop) .hero-alert { flex-wrap: wrap; }
  html:not(.layout-desktop) .doc-toolbar select { max-width: 100%; }
  html:not(.layout-desktop) .fiche-head h3 { font-size: 17px; }
  html:not(.layout-desktop) .fiche-greeting { font-size: 17px; }
  html:not(.layout-desktop) .coord-grid { grid-template-columns: 1fr 1fr; }
  html:not(.layout-desktop) .shift-grid.one-day th:first-child, html:not(.layout-desktop) .shift-grid.one-day td:first-child { min-width: 120px; }
  html:not(.layout-desktop) .day-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 10px; }
  html:not(.layout-desktop) .type-legend { display: none; }
  html:not(.layout-desktop) .control-tiles { grid-template-columns: 1fr 1fr; }
  html:not(.layout-desktop) #modal { max-height: 92vh; }
  /* onglets du bas */
  html:not(.layout-desktop) #mobile-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--topbar-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  html:not(.layout-desktop) .mtab { flex: 1; border: 0; background: none; color: var(--text-dim); font: inherit; font-size: 10.5px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; border-radius: 12px; position: relative; min-height: 48px; }
  html:not(.layout-desktop) .mtab.active { color: var(--accent); }
  html:not(.layout-desktop) .mtab.active .ico-svg { background: var(--accent-soft); border-radius: 10px; padding: 3px; box-sizing: content-box; }
  html:not(.layout-desktop) .mtab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html:not(.layout-desktop) .mtab .count { position: absolute; top: 2px; right: 14%; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
  html:not(.layout-desktop) #consigne-overlay { padding-bottom: 80px; }
  /* Barre du haut : les onglets de société peuvent rétrécir, le nom se coupe en « … » (pas de défilement latéral) */
  html:not(.layout-desktop) #company-tabs, html:not(.layout-desktop) .company-tab { min-width: 0; }
  html:not(.layout-desktop) .company-tab .co-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* Petit téléphone : libellés secondaires masqués (logo de société seul, chrono compact) */
@media (max-width: 480px) {
  html:not(.layout-desktop) .topbar-row { gap: 6px; }
  html:not(.layout-desktop) .company-tab .co-name { display: none; }
  html:not(.layout-desktop) .clock-timer { padding: 6px 8px; gap: 6px; }
  html:not(.layout-desktop) #pointage { gap: 4px; }
}
/* ===== Écran tactile : cibles assez grandes pour le doigt ===== */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .btn-small, .chip-x, .val-btn { min-height: 36px; }
  .clock-mini { width: 36px; height: 36px; }
  .subnav-item, .nav-group { min-height: 40px; }
  .kb-item { padding: 10px 14px; }
  .doctor-card { padding: 12px; }
}


/* ===== Format ordinateur forcé (réglage « Affichage ») dans une fenêtre étroite ===== */
@media (max-width: 1100px) {
  html.layout-desktop .topbar-row { flex-wrap: wrap; row-gap: 6px; }
  html.layout-desktop #nav-groups { order: 5; flex-basis: 100%; }
  html.layout-desktop .topbar-spacer { flex: 1 1 200px; }
  html.layout-desktop #content-inner { padding: 18px 16px 60px; }
}

/* ===== Historique des modifications d'une fiche ===== */
.last-edit { margin-top: 4px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.hist-entry { border-bottom: 1px solid var(--line); padding: 8px 0; }
.hist-entry:last-child { border-bottom: 0; }
.hist-entry summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.hist-entry summary::before { content: '›'; color: var(--accent); font-size: 16px; transition: transform .15s; }
.hist-entry[open] summary::before { transform: rotate(90deg); }
.hist-table { margin-top: 8px; font-size: 12.5px; }
.hist-table td { vertical-align: top; max-width: 380px; word-break: break-word; }

/* ===== Joindre ce médecin ===== */
.reach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.reach-cell { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--line); }
.reach-cell:last-child { border-right: 0; }
.reach-head { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.reach-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.reach-chips { display: inline-flex; gap: 4px; }
.reach-chips .chip .ico-svg { margin-right: 2px; }
@media (max-width: 760px) { html:not(.layout-desktop) .reach-grid { grid-template-columns: 1fr; } html:not(.layout-desktop) .reach-cell { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ===== Discussion : colonne des salons, groupes privés, conversations, mentions ===== */
.chat-layout.three { grid-template-columns: 230px 1fr 215px; }
.chat-side { padding: 8px 8px 12px; max-height: calc(100vh - 275px); overflow: auto; }
.side-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 700; padding: 10px 8px 4px; display: flex; align-items: center; gap: 6px; }
.side-add { margin-left: auto; border: 1px solid var(--border); background: var(--surface); color: var(--accent); width: 22px; height: 22px; border-radius: 7px; font-weight: 800; cursor: pointer; }
.side-add:hover { background: var(--accent-soft); }
.side-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 8px; border-radius: 9px; font: inherit; font-weight: 600; font-size: 13px; color: var(--text); cursor: pointer; }
.side-item:hover { background: var(--accent-soft); }
.side-item.active { background: var(--accent-grad); color: #fff; }
.side-item.active .muted { color: rgba(255,255,255,.8); }
.side-item .count { background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.side-empty { font-size: 12px; color: var(--text-dim); padding: 4px 8px 6px; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; flex-wrap: wrap; }
.chat-composer { position: relative; }
.mention-pop { position: absolute; bottom: calc(100% + 6px); left: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 4px; z-index: 30; min-width: 260px; }
.mention-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 8px; font: inherit; font-weight: 600; font-size: 13px; color: var(--text); cursor: pointer; }
.mention-item.active, .mention-item:hover { background: var(--accent-soft); }
.mention { background: var(--accent-soft); color: var(--accent); font-weight: 700; border-radius: 6px; padding: 0 4px; }
.mention.me { background: var(--amber-soft); color: var(--amber); }
.msg.mentioned { background: var(--amber-soft); }
.tag.mention-tag { background: var(--amber-soft); color: var(--amber); }
@media (max-width: 980px) {
  html:not(.layout-desktop) .chat-layout.three { grid-template-columns: 1fr; }
  html:not(.layout-desktop) .chat-side { max-height: none; display: flex; gap: 4px; overflow-x: auto; padding: 6px; }
  html:not(.layout-desktop) .chat-side .side-title { display: none; }
  html:not(.layout-desktop) .chat-side .side-empty { display: none; }
  html:not(.layout-desktop) .chat-side .side-item { width: auto; white-space: nowrap; }
}
.reach-settings { border-top: 1px dashed var(--border); margin-top: 12px; padding-top: 10px; }
.reach-settings .check-row { flex-wrap: wrap; gap: 6px; }
.reach-settings .check-row.is-off { color: var(--text-dim); }

/* ===== Modales : lignes « case + nom + menu » (attribution, membres) — le menu ne doit pas écraser le nom ===== */
#modal-body label.check-row { display: flex; align-items: center; gap: 8px; margin: 2px 0; font-weight: 600; color: var(--text); font-size: 13.5px; }
#modal-body label.check-row input[type=checkbox] { margin: 0; flex: 0 0 auto; }
#modal-body .assign-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); }
#modal-body .assign-row .check-row { flex: 1 1 auto; min-width: 0; }
#modal-body .assign-row .check-row .grow { min-width: 0; }
#modal-body .assign-row select { width: auto; flex: 0 0 auto; margin: 0; padding: 6px 28px 6px 8px; font-size: 12.5px; }
.assign-group { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 700; margin: 12px 0 4px; }
.chip.chip-scope { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.chip.chip-scope.sortants { background: var(--amber-soft); color: var(--amber); }
.recap-pre { white-space: pre-wrap; font-family: inherit; font-size: 13.5px; line-height: 1.5; margin: 0; }
.recap-list details { border-bottom: 1px solid var(--line); padding: 8px 0; }
.recap-list summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; }
/* ===== Retours d'appels (réécoute par la supervision) ===== */
.call-audio { height: 30px; max-width: 220px; vertical-align: middle; }
.feedback-row { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.feedback-row.new { background: var(--amber-soft); }
.feedback-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feedback-head .btn { margin-left: auto; }
.feedback-note { margin: 6px 0; white-space: pre-wrap; }
.feedback-audio { margin-top: 4px; }
#modal-body input[type=file] { display: block; margin: 4px 0 6px; font-size: 13px; }
#modal-body #sc-message { margin: 2px 0 6px 26px; width: calc(100% - 26px); }

/* ===== Correctifs relecture : lignes de modales ===== */
#modal-body label.check-row { flex-wrap: wrap; }
#modal-body label.check-row > .muted { flex-basis: auto; }
#modal-body .assign-row .check-row { flex-wrap: nowrap; }
.as-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.as-who .as-name { font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.as-who .as-meta { font-size: 11.5px; font-weight: 500; color: var(--text-dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ===== Reprise SACHEM (Dolibarr) : contacts du cabinet, historique, espace commercial ===== */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0; padding: 0; overflow: hidden; }
.people-cell { padding: 10px 14px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.sachem-hist { padding: 8px 16px; }
.sachem-hist summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.sachem-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.sachem-row > .muted { min-width: 84px; }
.sachem-text { white-space: pre-wrap; color: var(--text-dim); margin-top: 3px; }
.chip-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.chip-tab { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.chip-tab.active { background: var(--accent-grad); color: #fff; border-color: transparent; }
.chip-tab.active .muted { color: rgba(255,255,255,.8); }
.data-table tr.row-alert td { background: var(--red-soft); background: color-mix(in srgb, var(--red) 8%, transparent); }

/* ===== Animation de connexion ===== */
.login-card { transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease; }
.login-card.leaving { transform: translateY(-16px) scale(.96); opacity: 0; }
.login-card.shake { animation: loginShake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes loginShake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); }
}
.login-card input.bad { outline: 2px solid #d33030; border-color: transparent; }
.btn-login { display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: filter .2s; }
.btn-login .spin { display: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: loginSpin .7s linear infinite; }
.btn-login.busy { filter: saturate(1.15) brightness(1.05); pointer-events: none; }
.btn-login.busy .spin { display: inline-block; }
@keyframes loginSpin { to { transform: rotate(360deg); } }

#login-anim { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
#login-anim.on { opacity: 1; pointer-events: auto; }
#login-anim .la-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(63,182,216,.28), transparent 55%), linear-gradient(150deg, #0e2a3a 0%, #14618a 55%, #2189b4 100%); }
#login-anim .la-fade { position: absolute; inset: 0; background: var(--bg); opacity: 0; transition: opacity .42s ease; }
#login-anim.done .la-fade { opacity: 1; }
.la-stage { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.la-gem { width: 104px; height: 104px; opacity: 0; transform: scale(.5) rotate(-12deg); filter: drop-shadow(0 22px 40px rgba(3, 20, 30, .45)); }
#login-anim.on .la-gem { animation: laGemIn .8s cubic-bezier(.2,1.35,.35,1) .08s forwards; }
@keyframes laGemIn { to { opacity: 1; transform: none; } }
.la-gem .facet { stroke-dasharray: 60; stroke-dashoffset: 60; }
#login-anim.on .la-gem .facet { animation: laDraw .9s ease .38s forwards; }
#login-anim.on .la-gem .facet.edge { animation-delay: .5s; }
@keyframes laDraw { to { stroke-dashoffset: 0; } }
.la-gem .shine { transform: translateX(-10px) skewX(-18deg); }
#login-anim.on .la-gem .shine { animation: laShine .9s cubic-bezier(.4,0,.2,1) .78s forwards; }
@keyframes laShine { to { transform: translateX(34px) skewX(-18deg); } }
.la-ring { position: absolute; inset: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); opacity: 0; transform: scale(.6); }
#login-anim.on .la-ring { animation: laRing 1.25s cubic-bezier(.2,.7,.3,1) .45s forwards; }
#login-anim.on .la-ring.r2 { animation-delay: .7s; border-color: rgba(124,79,216,.55); }
@keyframes laRing { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.3); } }
.la-text { position: relative; text-align: center; color: #fff; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.la-hello { font-size: 30px; font-weight: 800; letter-spacing: -.02em; opacity: 0; transform: translateY(12px); }
.la-sub { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.72); margin-top: 6px; opacity: 0; transform: translateY(8px); }
#login-anim.on .la-hello { animation: laUp .6s cubic-bezier(.2,.8,.2,1) .5s forwards; }
#login-anim.on .la-sub { animation: laUp .6s cubic-bezier(.2,.8,.2,1) .66s forwards; }
@keyframes laUp { to { opacity: 1; transform: none; } }
.la-bar { width: 170px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); margin: 16px auto 0; overflow: hidden; opacity: 0; }
.la-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #3fb6d8, #fff 60%, #b9a2f0); }
#login-anim.on .la-bar { animation: laUp .4s ease .7s forwards; }
#login-anim.on .la-bar i { animation: laFill 1s cubic-bezier(.4,0,.2,1) .72s forwards; }
@keyframes laFill { to { width: 100%; } }

/* Entree dans l'application juste apres la connexion */
body.app-enter #topbar { animation: appEnterTop .6s cubic-bezier(.2,.8,.2,1) both; }
body.app-enter #brand svg { animation: appBrandPop .8s cubic-bezier(.2,1.35,.35,1) .15s both; }
body.app-enter #view-header { animation: appEnterUp .6s cubic-bezier(.2,.8,.2,1) .12s both; }
body.app-enter #view-body { animation: appEnterUp .7s cubic-bezier(.2,.8,.2,1) .22s both; }
body.app-enter #mobile-tabs { animation: appEnterBottom .6s cubic-bezier(.2,.8,.2,1) .2s both; }
@keyframes appEnterTop { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes appEnterUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes appEnterBottom { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes appBrandPop { from { opacity: 0; transform: scale(.4) rotate(-14deg); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .login-card, .login-card.shake, #login-anim *, body.app-enter * { animation: none !important; transition: none !important; }
}
body.app-preenter #topbar, body.app-preenter #view-header, body.app-preenter #view-body, body.app-preenter #mobile-tabs { opacity: 0; }

/* ======================================================================
   Animations & finitions (qualite percue) — toutes coupees si l'appareil
   demande de reduire les animations (voir tout en bas).
   ====================================================================== */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.2, 1.3, .35, 1); }

/* Entree d'un ecran : les blocs montent en cascade, une seule fois par ouverture */
#view-body { animation: none; }
#view-body.enter > .rise { animation: viewRise .5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
#view-body.enter .stagger { animation: viewRise .45s var(--ease-out) backwards; animation-delay: calc(90ms + var(--j, 0) * 28ms); }
/* pas d'etape de fin : chaque element retrouve sa propre opacite (cartes estompees, survol...) */
@keyframes viewRise { from { opacity: 0; transform: translateY(12px); } }
#view-body.enter .hbar-fill { animation: growX .8s var(--ease-out) both; transform-origin: left center; animation-delay: .15s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Chargement : squelette qui scintille */
.skeleton { display: flex; flex-direction: column; gap: 14px; }
.skeleton .sk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.skeleton i, .skeleton .sk-block, .skeleton .sk-line { display: block; border-radius: 14px; background: var(--surface-2); background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--surface-2) 45%, var(--surface)) 50%, var(--surface-2) 75%); background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.skeleton i { height: 84px; }
.skeleton .sk-block { height: 170px; }
.skeleton .sk-line { height: 14px; width: 70%; border-radius: 7px; }
.skeleton .sk-line.short { width: 42%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Fenetres : fond flou qui apparait, fenetre qui se pose */
#modal-backdrop:not([hidden]) { animation: backdropIn .22s ease both; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#modal-backdrop:not([hidden]) #modal { animation: modalIn .32s var(--ease-spring) both; }
#modal-backdrop.closing { animation: backdropOut .17s ease both; }
#modal-backdrop.closing #modal { animation: modalOut .17s ease both; }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes modalOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.98); } }

/* Bulles de message */
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 36px)); padding: 11px 15px; border-radius: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 14px 36px rgba(10, 22, 32, .18); font-size: 13.5px; font-weight: 600; animation: toastIn .38s var(--ease-spring) both; }
.toast .ico-svg { flex: 0 0 auto; }
.toast.success .ico-svg { color: var(--green); }
.toast.error { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.toast.error .ico-svg { color: var(--red); }
.toast.info .ico-svg { color: var(--accent); }
.toast.out { animation: toastOut .25s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px); } }
html:not(.layout-desktop) #toasts { right: 12px; left: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); align-items: stretch; }
@media (min-width: 761px) { html:not(.layout-desktop) #toasts { left: auto; bottom: 18px; align-items: flex-end; } }

/* Menus : le trait de l'onglet actif se dessine, le groupe actif fait un petit rebond */
.subnav-item.active { border-bottom-color: transparent; background: linear-gradient(var(--accent), var(--accent)) no-repeat center bottom / 100% 2px; }
.subnav-item.active.ink { animation: inkIn .38s var(--ease-out); }
@keyframes inkIn { from { background-size: 0% 2px; } to { background-size: 100% 2px; } }
.nav-group.ink, .mtab.ink { animation: navPop .42s var(--ease-spring); }
@keyframes navPop { 0% { transform: scale(.94); } 100% { transform: none; } }
.count.bump { animation: badgeBump .55s var(--ease-spring); }
@keyframes badgeBump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* Barre du haut : ombre douce quand on fait defiler */
#topbar { transition: box-shadow .25s ease; }
#topbar.scrolled { box-shadow: 0 8px 24px rgba(10, 22, 32, .08); }

/* Boutons et cartes : reponse au survol et au clic */
.btn { transition: transform .14s var(--ease-out), box-shadow .18s ease, background .15s ease, filter .15s ease; }
.btn-primary:where(:not(:disabled)):hover { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 38%, transparent); }
.btn-primary:active { transform: translateY(0) scale(.97); }
.doctor-card, .consigne-card, .side-item, .demo-user, .chip-tab { transition: transform .18s var(--ease-out), box-shadow .18s ease, border-color .18s ease, background .15s ease; }
.data-table tr.row-click td { transition: background .12s ease; }
.data-table tr.row-click:hover td { background: var(--accent-soft); }
button:focus-visible, a:focus-visible, summary:focus-visible, [role=button]:focus-visible { outline: 2px solid var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }

/* Consigne lue : coche verte, puis la carte s'efface */
.consigne-card.just-read { position: relative; animation: readFlash .45s var(--ease-out); }
.consigne-card.just-read::after { content: ""; position: absolute; right: 16px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 20px no-repeat; animation: checkPop .38s var(--ease-spring) both; }
@keyframes readFlash { 0% { border-left-color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--surface)); } 100% { border-left-color: var(--green); } }
@keyframes checkPop { from { transform: scale(0); } to { transform: scale(1); } }

/* Discussion : les nouveaux messages glissent en place */
.msg.msg-in { animation: msgIn .34s var(--ease-out) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Pointage : le point vert « respire » pendant le service */
.clock-timer .status-dot.online { position: relative; }
.clock-timer .status-dot.online::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: breathe 2.4s ease-out infinite; }
@keyframes breathe { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* Etats vides : illustration douce */
p.muted.empty-state { text-align: center; padding: 26px 16px 22px; border: 1px dashed var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
p.muted.empty-state::before { content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 10px; background: color-mix(in srgb, var(--accent) 70%, var(--text-dim)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 1.7 4.9L18.5 9.5l-4.8 1.6L12 16l-1.7-4.9L5.5 9.5l4.8-1.6z'/%3E%3Cpath d='m18.7 15.5.7 2 2 .8-2 .7-.7 2.1-.8-2.1-2-.7 2-.8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 1.7 4.9L18.5 9.5l-4.8 1.6L12 16l-1.7-4.9L5.5 9.5l4.8-1.6z'/%3E%3Cpath d='m18.7 15.5.7 2 2 .8-2 .7-.7 2.1-.8-2.1-2-.7 2-.8z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .8; }
td p.muted.empty-state, .card p.muted.empty-state { border: 0; background: transparent; }

/* Changement de theme en fondu */
html.theme-fade, html.theme-fade * { transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Fil d'activite : lectures de consignes / Mes dernieres lectures */
.feed-dot.lecture { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
.reads-card { padding: 4px 18px; }
.reads-card > summary { cursor: pointer; padding: 12px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; }
.reads-card > summary::-webkit-details-marker { display: none; }
.reads-card > summary .ico-svg { color: var(--green); }
.reads-card[open] > summary { border-bottom: 1px solid var(--line); }
.reads-list { max-height: 460px; overflow-y: auto; padding-bottom: 8px; }
.reads-day { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin: 14px 0 4px; }
.reads-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.reads-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-dim); min-width: 44px; }
.reads-check { color: var(--green); display: inline-flex; }

/* ===== Petits mots du matin et du soir (pointage) ===== */
#day-moment { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 22, 32, .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: backdropIn .3s ease both; }
#day-moment.out { animation: backdropOut .28s ease both; }
.dm-card { position: relative; width: min(430px, 100%); border-radius: 22px; overflow: hidden; background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgba(6, 25, 36, .35); animation: dmIn .55s cubic-bezier(.2, 1.25, .35, 1) both; }
#day-moment.out .dm-card { animation: modalOut .28s ease both; }
@keyframes dmIn { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
.dm-art { height: 132px; display: grid; place-items: center; }
.dm-hello .dm-art { background: linear-gradient(180deg, #8ecdf0 0%, #ffd9a8 78%, #ffc58a 100%); }
.dm-bye .dm-art { background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.12), transparent 40%), linear-gradient(180deg, #1c2452 0%, #4a3a8c 100%); }
.dm-art svg { width: 190px; height: 114px; overflow: visible; }
.dm-body { padding: 18px 24px 22px; text-align: center; }
.dm-body h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.dm-body p { color: var(--text-dim); margin: 6px 0 14px; font-size: 14.5px; }
.dm-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.dm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; opacity: 0; animation: riseIn .45s var(--ease-out) forwards; }
.dm-chip:nth-child(1) { animation-delay: .35s; } .dm-chip:nth-child(2) { animation-delay: .45s; } .dm-chip:nth-child(3) { animation-delay: .55s; } .dm-chip:nth-child(4) { animation-delay: .65s; } .dm-chip:nth-child(5) { animation-delay: .75s; }
.dm-chip.warn { background: var(--red-soft); color: var(--red); border-color: transparent; }
.dm-actions { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.dm-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.dm-timer i { display: block; height: 100%; background: var(--accent-grad); transform-origin: left; animation: dmTimer linear forwards; }
#day-moment.paused .dm-timer i { animation-play-state: paused; }
@keyframes dmTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* matin : le soleil se leve, ses rayons tournent, les nuages passent */
.dm-sun .dm-rise { animation: sunRise 1.1s cubic-bezier(.2, .9, .3, 1) .1s both; }
.dm-sun .dm-rays { transform-origin: 80px 52px; animation: raysSpin 14s linear infinite, raysIn .8s ease .6s both; }
.dm-sun .dm-cloud.c1 { animation: cloudDrift 7s ease-in-out infinite alternate; }
.dm-sun .dm-cloud.c2 { animation: cloudDrift 9s ease-in-out infinite alternate-reverse; }
@keyframes sunRise { from { transform: translateY(46px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes raysSpin { to { transform: rotate(360deg); } }
@keyframes raysIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cloudDrift { from { transform: translateX(-6px); } to { transform: translateX(10px); } }
/* soir : la lune flotte, les etoiles scintillent */
.dm-moon .dm-float { animation: moonIn .9s cubic-bezier(.2, .9, .3, 1) both, moonFloat 5s ease-in-out 1s infinite alternate; }
.dm-moon .dm-stars circle { animation: twinkle 2.2s ease-in-out infinite; }
.dm-moon .dm-stars circle:nth-child(2n) { animation-delay: .7s; } .dm-moon .dm-stars circle:nth-child(3n) { animation-delay: 1.4s; }
@keyframes moonIn { from { transform: translateY(-30px) rotate(-18deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes moonFloat { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Fil d'activite : connexions du jour */
.feed-dot.connexion { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
/* Mon compte (clic sur son nom) */
#me-chip.clickable { cursor: pointer; border-radius: 12px; transition: background .15s ease; }
#me-chip.clickable:hover { background: var(--accent-soft); }
.account-hero { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.account-hero .avatar { width: 46px; height: 46px; font-size: 17px; }
.account-name { font-size: 18px; font-weight: 800; }
.account-links { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; }
.account-link { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: transform .15s var(--ease-out), border-color .15s ease, box-shadow .15s ease; }
.account-link:hover { border-color: var(--accent); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 14%, transparent); transform: translateY(-1px); }
.account-link .ico-svg { color: var(--accent); flex: 0 0 auto; }
.account-link .grow { display: flex; flex-direction: column; gap: 2px; }
.account-link .muted { font-size: 12.5px; }
.account-go { font-size: 22px; color: var(--text-dim); line-height: 1; }
.account-sub { margin: 18px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }

/* Logo Opale : retour a l'accueil */
#brand[role=button] { cursor: pointer; border-radius: 10px; transition: opacity .15s ease; }
#brand[role=button]:hover { opacity: .85; }
#brand.bounce svg { animation: appBrandPop .6s var(--ease-spring); }

/* Menu « personne » (clic sur un nom de l'accueil) */
.person-menu { position: fixed; z-index: 80; min-width: 230px; max-width: 300px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 44px rgba(10, 22, 32, .2); animation: pmIn .18s var(--ease-out) both; transform-origin: top left; }
.person-menu.out { animation: pmOut .14s ease both; }
@keyframes pmIn { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pmOut { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.person-menu .pm-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 13.5px; }
.person-menu .pm-head .muted { font-size: 12px; }
.person-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.person-menu button .muted { font-weight: 500; font-size: 11.5px; margin-left: auto; }
.person-menu button .ico-svg { color: var(--accent); }
.person-menu button:hover, .person-menu button:focus-visible { background: var(--accent-soft); outline: none; }
button.chip.row-click { border: 0; font: inherit; cursor: pointer; }

/* ===== Poste : choix de la secretaire, role retenu, formations ===== */
.mode-chooser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease, transform .15s var(--ease-out); }
.mode-opt span { display: flex; flex-direction: column; }
.mode-opt small { color: var(--text-dim); font-size: 11.5px; font-weight: 500; }
.mode-opt .ico-svg { color: var(--text-dim); flex: 0 0 auto; }
.mode-opt:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); transform: translateY(-1px); }
.mode-opt.selected { border-color: var(--accent); background: var(--accent-soft); }
.mode-opt.selected .ico-svg { color: var(--accent); }
.mode-chooser.compact .mode-opt { padding: 8px 10px; font-size: 13px; }
.mode-forced { margin-top: 10px; font-size: 13px; color: var(--amber); display: block; line-height: 1.45; }
.mode-forced .ico-svg { vertical-align: -2px; margin-right: 4px; }
.plan-mode { margin-top: 3px; display: flex; gap: 4px; flex-wrap: wrap; }
.roles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.roles-card { padding: 14px 16px; min-width: 0; }
.roles-line select { max-width: 100%; }
.roles-line { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.roles-line .info-label { min-width: 96px; padding-top: 3px; }
.roles-line select { width: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 13px; }
.roles-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--border); background: transparent; color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 600; cursor: default; }
button.skill-chip { cursor: pointer; }
button.skill-chip:hover { border-color: var(--accent); color: var(--text); }
.skill-chip small { font-size: 10.5px; opacity: .75; margin-left: 2px; }
.skill-chip.en_formation { border-style: solid; border-color: color-mix(in srgb, var(--amber) 50%, transparent); background: var(--amber-soft); color: var(--amber); }
.skill-chip.formee { border-style: solid; border-color: transparent; background: var(--green-soft); color: var(--green); }
.skill-chip.mini { padding: 1px 7px; font-size: 10.5px; }
.roles-split { height: 8px; border-radius: 6px; background: var(--amber); overflow: hidden; margin-top: 8px; }
.roles-split span { display: block; height: 100%; background: var(--accent); border-radius: 6px 0 0 6px; }
.build-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.build-meta { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.db-rowtype { width: auto; max-width: 230px; margin-left: 6px; padding: 4px 6px; font-size: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); }
.db-warn { color: var(--amber); font-size: 11.5px; font-weight: 700; margin-left: 6px; }
.mb-roles { margin-top: 6px; }
.mb-roles .roles-grid { grid-template-columns: 1fr; }
@media (max-width: 760px) { html:not(.layout-desktop) .roles-grid, html:not(.layout-desktop) .mode-chooser { grid-template-columns: 1fr; } }
.build-row { flex-wrap: wrap; cursor: default; }
.build-row .build-times { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.build-row .db-rowtype { margin-left: 0; }

/* Identifiants de l'equipe */
.ta-tools { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.ta-list { max-height: 50vh; overflow: auto; border-radius: var(--radius); }
.ta-list code { font-size: 12.5px; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }

/* Fiche des identifiants (plein ecran, imprimable seule) */
#cred-sheet { position: fixed; inset: 0; z-index: 95; background: var(--bg); overflow: auto; animation: backdropIn .2s ease both; }
.cred-inner { max-width: 980px; margin: 0 auto; padding: 22px 18px 40px; }
.cred-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cred-top h2 { font-size: 22px; font-weight: 800; }
.cred-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cred-warn { background: var(--amber-soft); color: var(--amber); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 16px; }
.cred-warn .ico-svg { vertical-align: -3px; margin-right: 4px; }
.cred-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 12px; }
.cred-card { background: var(--surface); border: 1.5px dashed var(--border); border-radius: 14px; padding: 14px 16px; break-inside: avoid; page-break-inside: avoid; }
.cred-name { font-weight: 800; font-size: 15px; }
.cred-card dl { display: grid; grid-template-columns: minmax(80px, 105px) minmax(0, 1fr); gap: 4px 8px; margin: 10px 0 6px; font-size: 13.5px; }
.cred-card dt { color: var(--text-dim); font-weight: 600; }
.cred-card dd { margin: 0; overflow-wrap: anywhere; }
.cred-card code { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; font-size: 14px; }
.cred-note { font-size: 11.5px; color: var(--text-dim); }
@media print {
  body.cred-open > *:not(#cred-sheet) { display: none !important; }
  body.cred-open #cred-sheet { position: static; overflow: visible; background: #fff; color: #000; }
  body.cred-open .cred-actions, body.cred-open .cred-warn { display: none; }
  body.cred-open .cred-card { border-color: #777; background: #fff; }
  body.cred-open .cred-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Fils avec les cabinets medecins */
.chat-layout.cab-one { grid-template-columns: 1fr; }
.chat-layout.cab-two { grid-template-columns: 230px 1fr; }
#cab-messages { min-height: 320px; }
.msg.mine { background: var(--accent-soft); background: color-mix(in srgb, var(--accent) 6%, transparent); }
@media (max-width: 760px) { html:not(.layout-desktop) .chat-layout.cab-two { grid-template-columns: 1fr; } }

/* Recherche de medecin */
.doc-combo { position: relative; }
.dc-field { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; }
.dc-field:focus-within { outline: 2px solid var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); border-color: transparent; }
.dc-field .ico-svg { color: var(--text-dim); flex: 0 0 auto; }
#modal-body .dc-field input.dc-input, .dc-input { border: 0 !important; background: transparent !important; padding: 10px 0 !important; outline: none; width: 100%; font: inherit; }
.dc-clear { border: 0; background: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 4px; }
.dc-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 70; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(10, 22, 32, .18); padding: 5px; max-height: 300px; overflow-y: auto; animation: pmIn .15s var(--ease-out) both; }
.dc-head { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); padding: 6px 10px 4px; }
.dc-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 9px; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; }
.dc-item.active, .dc-item:hover { background: var(--accent-soft); }
.dc-item mark { background: color-mix(in srgb, var(--amber) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.dc-mine { width: 14px; display: inline-flex; color: var(--amber); }
.dc-empty { padding: 10px 12px; color: var(--text-dim); font-size: 13px; }
/* Mes medecins : compteurs */
.doc-counts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.count-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; }
.count-pill .ico-svg { color: var(--accent); }
.count-pill.mine { background: var(--accent-soft); border-color: transparent; }

/* ===== Agenda & routines ===== */
.ag-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ag-nav { display: flex; align-items: center; gap: 6px; }
.ag-nav .btn-ghost { font-size: 20px; line-height: 1; padding: 4px 12px; }
.ag-month { font-size: 19px; min-width: 150px; text-align: center; letter-spacing: -.01em; }
.ag-filter { flex: 0 1 340px; min-width: 220px; }
.ag-filter select { width: 100%; }
.ag-intro { margin: 4px 0 14px; display: flex; gap: 8px; align-items: flex-start; }
.ag-intro .ico-svg { color: var(--amber); flex: 0 0 auto; margin-top: 2px; }
.ag-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.ag-cal { padding: 0; overflow: hidden; }
.ag-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.ag-head div { padding: 8px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }
.ag-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ag-cell { min-height: 104px; padding: 6px 6px 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; min-width: 0; transition: background .15s; }
.ag-cell:nth-child(7n) { border-right: 0; }
.ag-cell.out { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.ag-cell.out .ag-num { opacity: .45; }
.ag-cell.past .ag-pill { opacity: .55; }
.ag-cell.can-add { cursor: pointer; }
.ag-cell.can-add:hover { background: var(--accent-soft); }
.ag-num { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--text-dim); padding: 0 2px 2px; }
.ag-add { opacity: 0; color: var(--accent); font-size: 16px; font-weight: 700; transition: opacity .15s; }
.ag-cell.can-add:hover .ag-add { opacity: 1; }
.ag-cell.today .ag-num span:first-child { background: var(--accent); color: #fff; border-radius: 999px; min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.ag-pill { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; border: 0; text-align: left; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--text); padding: 3px 7px; border-radius: 7px;
  background: var(--surface-2); background: color-mix(in srgb, var(--c) 14%, var(--surface)); border-left: 3px solid var(--c); transition: transform .12s var(--ease-out), background .15s; }
.ag-pill:hover { background: color-mix(in srgb, var(--c) 24%, var(--surface)); transform: translateX(1px); }
.ag-pill.sent::after { content: '✓'; margin-left: auto; color: var(--green); font-weight: 800; }
.ag-pill-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ag-pill.big { font-size: 13.5px; padding: 9px 12px; }
.ag-pill.big .ag-pill-t { white-space: normal; }
.ag-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--c); flex: 0 0 auto; }
.ag-more { border: 0; background: none; color: var(--accent); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; text-align: left; padding: 1px 7px; }
.ag-side h4 { margin: 0 0 10px; }
.ag-routines { display: flex; flex-direction: column; gap: 8px; }
.ag-routine { display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: 12px; padding: 11px 13px; transition: box-shadow .15s, transform .15s var(--ease-out); }
.ag-routine:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.ag-routine.paused { opacity: .6; border-left-style: dashed; }
.ag-r-top { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ag-r-freq { font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--c) 70%, var(--text)); }
.ag-r-who { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.ag-r-next { font-size: 12px; }
.ag-routines-fiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ag-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 26px 16px; border: 1px dashed var(--border); border-radius: 14px; color: var(--text-dim); font-size: 13px; }
.ag-empty .ico-svg { color: var(--amber); }
.ag-daylist { display: flex; flex-direction: column; gap: 6px; }
/* detail */
.ag-detail { display: flex; flex-direction: column; gap: 10px; border-left: 4px solid var(--c); padding-left: 14px; }
.ag-d-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-d-body { white-space: pre-wrap; background: var(--surface-2); border-radius: 10px; padding: 10px 13px; line-height: 1.5; }
.ag-d-sec { display: flex; flex-direction: column; gap: 6px; }
.ag-names { display: flex; flex-wrap: wrap; gap: 5px; }
.ag-d-foot { font-size: 12px; }
.ag-d-actions { flex-wrap: wrap; align-items: center; }
.linkish { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700; padding: 0 0 0 4px; text-decoration: underline; }
/* formulaire */
.ag-seg, .ag-freq, .ag-days { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-seg button, .ag-freq button, .ag-days button { border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .12s var(--ease-out); }
.ag-seg button:hover, .ag-freq button:hover, .ag-days button:hover { border-color: var(--accent); }
.ag-seg button.on, .ag-freq button.on, .ag-days button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ag-seg button:active, .ag-freq button:active, .ag-days button:active { transform: scale(.97); }
.ag-days { margin-top: 8px; }
.ag-days button { width: 48px; padding: 7px 0; text-transform: capitalize; }
.ag-recips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 8px; font-size: 12.5px; min-height: 4px; }
.ag-dates { grid-template-columns: 1fr 1fr 130px; }
.ag-summary { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--amber-soft); line-height: 1.5; font-size: 13.5px; }
.ag-summary .ico-svg { color: var(--amber); flex: 0 0 auto; margin-top: 3px; }
@media (max-width: 1100px) { .ag-layout { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .ag-cell { min-height: 64px; padding: 4px 3px; }
  .ag-pill { padding: 3px; justify-content: center; }
  .ag-pill-t { display: none; }
  .ag-head div { padding: 6px 4px; font-size: 10px; text-align: center; }
  .ag-dates { grid-template-columns: 1fr 1fr; }
  .ag-filter { flex-basis: 100%; }
}
.ag-dates input { width: 100%; }
@media (max-width: 700px) { .ag-pill.big .ag-pill-t { display: block; } .ag-pill.big { justify-content: flex-start; padding: 9px 12px; } }

/* Nouveau medecin */
.nd-preview { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 13.5px; color: var(--text-dim); min-height: 4px; }
.nd-preview .ico-svg { color: var(--accent); }
.nd-dups { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--amber-soft); display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.nd-dup { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 10px; padding: 8px 10px; }

/* ===== Suivi qualité ===== */
.q-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 6px 0 16px; }
.q-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.q-stat-v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.q-stat-v small, .q-big small, .q-mid small, .q-score-big small, .q-score-val small { font-size: 12px; color: var(--text-dim); font-weight: 600; margin-left: 1px; }
.q-team { display: flex; flex-direction: column; gap: 8px; }
.qs-row.qs-todo { border-left: 4px solid var(--orange); }
.qs-row .q-who strong.row-click { cursor: pointer; }
.qs-row .q-who strong.row-click:hover { color: var(--accent); }
.qs-row .q-who em { font-style: normal; color: var(--text); }
.qs-note { min-width: 118px; }
.qs-note .linkish { font-size: 11px; padding: 0; }
.qs-form { padding: 14px 18px; margin: -2px 0 2px 24px; border-left: 4px solid var(--accent); }
.qs-form label { display: block; font-size: 12px; font-weight: 700; margin: 0 0 6px; }
.qs-form-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-start; }
.qs-form-row .grow { min-width: 220px; }
.qs-form-row .qs-word { width: 100%; }
.qs-scores { display: flex; flex-wrap: wrap; gap: 4px; }
.qs-sc { border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; width: 34px; height: 32px; border-radius: 9px; cursor: pointer; transition: transform .1s, background .15s; }
.qs-sc:hover { border-color: var(--q); color: var(--q); }
.qs-sc.on { background: var(--q); border-color: var(--q); color: #fff; transform: scale(1.08); }
.qs-form-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.qs-form-actions .qs-hint { flex: 1; font-size: 11.5px; }
@media (max-width: 720px) { .qs-form { margin-left: 0; } .qs-form-actions { flex-wrap: wrap; } .qs-form-actions .qs-hint { flex-basis: 100%; } }
.q-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; transition: box-shadow .15s, transform .15s var(--ease-out); }
.q-row:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.q-who .muted { font-size: 12.5px; margin-top: 2px; }
.q-cell { display: flex; flex-direction: column; align-items: center; min-width: 74px; text-align: center; }
.q-cell .muted { font-size: 11px; line-height: 1.2; }
.q-big { font-size: 24px; font-weight: 800; }
.q-mid { font-size: 18px; font-weight: 700; }
.q-trend { display: flex; align-items: flex-end; gap: 3px; height: 34px; width: 60px; }
.q-trend-bar { flex: 1; border-radius: 3px 3px 1px 1px; min-height: 3px; }
.q-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.q-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.q-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.q-score-big { font-size: 28px; font-weight: 800; min-width: 64px; }
.q-noscore { color: var(--text-dim); display: flex; align-items: center; }
.q-block { background: var(--surface-2); border-radius: 10px; padding: 9px 12px; white-space: pre-wrap; line-height: 1.5; font-size: 13.5px; }
.q-block.good { background: var(--green-soft); }
.q-block.improve { background: var(--amber-soft); }
.q-block.errs { background: var(--red-soft); white-space: normal; }
.q-block.errs ul { margin: 4px 0 0; padding-left: 18px; }
.q-block.reply { background: var(--accent-soft); }
.q-lbl { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin-bottom: 3px; }
.q-ack { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.q-ack textarea { flex: 1 1 260px; min-height: 42px; }
.q-actions { display: flex; gap: 6px; justify-content: flex-end; }
.q-chart { display: flex; align-items: flex-end; gap: 10px; min-height: 120px; overflow-x: auto; }
.q-chart-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 38px; }
.q-chart-v { font-size: 12px; font-weight: 800; }
.q-chart-bar { height: 80px; width: 22px; background: var(--surface-2); border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden; }
.q-chart-bar span { width: 100%; border-radius: 6px 6px 0 0; }
.q-score-row { display: flex; align-items: center; gap: 14px; }
.q-score-row input[type=range] { flex: 1; accent-color: var(--q, var(--accent)); }
.q-score-val { font-size: 28px; font-weight: 800; min-width: 74px; text-align: right; }
.q-err-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.q-modes { display: flex; flex-direction: column; gap: 6px; }
.q-mode { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; cursor: pointer; }
.q-mode:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
/* Sans :has() (navigateurs d'avant 2023) : la carte du choix qui a le focus est mise en avant */
@supports not selector(:has(input:checked)) { .q-mode:focus-within { border-color: var(--accent); background: var(--accent-soft); } }
.q-mode span { display: flex; flex-direction: column; font-size: 13.5px; }
.q-mode .muted { font-size: 12px; }
@media (max-width: 800px) {
  .q-row { flex-wrap: wrap; }
  .q-trend { display: none; }
  .q-err-row { grid-template-columns: 1fr; }
}
/* ===== Fil d'activité ===== */
.act-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 12px; }
.act-search { flex: 1 1 260px; }
.act-days { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.act-chip { border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.act-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.act-date { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; background: var(--surface); }
.act-date input { border: 0 !important; background: transparent !important; padding: 4px 0 !important; font: inherit; font-size: 12.5px; }
.act-kind { flex: 0 0 auto; width: auto !important; }
.act-card { padding: 6px 20px 12px; }
.act-day { padding: 10px 0 4px; border-bottom: 1px solid var(--border); }
.act-day:last-child { border-bottom: 0; }
.act-day-head { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0 8px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.act-expand { border: 0; background: none; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 4px 0 6px 26px; }
.act-more-wrap { display: flex; justify-content: center; margin: 12px 0 4px; }
.q-err-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; grid-template-areas: "kind doc del" "desc desc desc"; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.q-err-row .qe-kind { grid-area: kind; }
.q-err-row .qe-doc-wrap { grid-area: doc; min-width: 0; }
.q-err-row .qe-desc { grid-area: desc; }
.q-err-row .qe-del { grid-area: del; }
@media (max-width: 800px) { .q-err-row { grid-template-columns: 1fr auto; grid-template-areas: "kind del" "doc doc" "desc desc"; } }
.q-mode { flex-direction: row !important; }
#modal-body .q-mode input[type=radio] { width: auto !important; flex: 0 0 auto; margin: 3px 0 0; }
#modal-body label.q-mode { display: flex !important; flex-direction: row; align-items: flex-start; gap: 10px; margin: 0; font-weight: 500; }
select.act-kind { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }

/* ===== Contrôles du jour ===== */
.ctrl-progress { display: flex; align-items: baseline; gap: 10px; }
.ctrl-bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 8px 0 12px; }
.ctrl-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--green)); border-radius: 999px; transition: width .6s var(--ease-out); }
.ctrl-sup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.ctrl-sup > .muted { min-width: 150px; font-size: 12.5px; font-weight: 700; }
.ctrl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; background: var(--accent-soft); font-size: 12.5px; font-weight: 600; }
.ctrl-chip.done { background: var(--green-soft); color: var(--green); }
.ctrl-settings { margin-top: 12px; font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ctrl-settings select { width: auto !important; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font: inherit; }
.ctrl-home { padding: 8px 16px 12px; }
.ctrl-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ctrl-row.done strong { color: var(--text-dim); text-decoration: line-through; }
.ctrl-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; }

/* ===== Quiz ===== */
.qz-hero { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 14px; }
.qz-hero.go { background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), color-mix(in srgb, var(--amber) 14%, var(--surface))); border-color: transparent; }
.qz-hero.done { background: var(--green-soft); border-color: transparent; }
.qz-hero strong { font-size: 17px; }
.qz-hero-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--amber); flex: 0 0 auto; box-shadow: var(--shadow); }
.btn-big { padding: 12px 26px; font-size: 16px; }
.qz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.qz-train-card { cursor: pointer; text-align: left; font: inherit; color: var(--text); }
.qz-train-card:hover { border-color: var(--accent); }
.qz-tabs { margin-bottom: 12px; }
.qz-card { padding: 18px 20px; }
.qz-podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 6px 0 18px; }
.qz-step { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 120px; text-align: center; }
.qz-step.me strong { color: var(--accent); }
.qz-medal { font-size: 26px; }
.qz-pts { font-size: 12.5px; color: var(--text-dim); font-weight: 700; }
.qz-block { width: 100%; border-radius: 12px 12px 4px 4px; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; font-weight: 800; font-size: 20px; color: #fff; }
.qz-step.r1 .qz-block { height: 90px; background: linear-gradient(180deg, #f5c542, #d9a414); }
.qz-step.r2 .qz-block { height: 66px; background: linear-gradient(180deg, #c9d2dc, #9aa7b4); }
.qz-step.r3 .qz-block { height: 50px; background: linear-gradient(180deg, #e2a56b, #bd7a3f); }
.qz-list { display: flex; flex-direction: column; gap: 4px; }
.qz-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.qz-row.me { background: var(--accent-soft); }
.qz-rank { width: 28px; text-align: center; font-weight: 800; }
.qz-hard { display: flex; flex-direction: column; gap: 8px; }
.qz-hard-row { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.qz-choices-mini { display: flex; flex-wrap: wrap; gap: 5px; }
.q-card.paused { opacity: .6; }
.qz-play { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.qz-top { display: flex; align-items: center; gap: 10px; }
.qz-pts-now { font-size: 18px; color: var(--amber); }
.qz-progress { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.qz-progress span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s var(--ease-out); }
.qz-timer { height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.qz-timer span { display: block; height: 100%; background: var(--amber); transform-origin: left; animation: qzTimer 10s linear forwards; }
@keyframes qzTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.qz-q h3 { margin: 8px 0 0; font-size: 21px; line-height: 1.35; letter-spacing: -.01em; }
.qz-quote { margin-top: 10px; padding: 12px 14px; border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 10px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; }
.qz-quote.sm { font-size: 12.5px; padding: 6px 10px; margin-top: 4px; }
.qz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qz-choices.two .qz-choice { font-size: 17px; justify-content: center; }
.qz-choice { display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: transform .12s var(--ease-out), border-color .15s, background .15s, opacity .2s; min-height: 64px; }
.qz-choice:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.qz-choice:active:not(:disabled) { transform: scale(.98); }
.qz-key { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex: 0 0 auto; }
.qz-choice.right { border-color: var(--green); background: var(--green-soft); animation: qzPop .35s var(--ease-spring); }
.qz-choice.right .qz-key { background: var(--green); color: #fff; }
.qz-choice.wrong { border-color: var(--red); background: var(--red-soft); animation: qzShake .35s; }
.qz-choice.wrong .qz-key { background: var(--red); color: #fff; }
.qz-choice.dim { opacity: .5; }
@keyframes qzPop { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes qzShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.qz-feedback { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; animation: pmIn .2s var(--ease-out) both; }
.qz-feedback.ok { background: var(--green-soft); }
.qz-feedback.ko { background: var(--amber-soft); }
.qz-feedback .btn { align-self: flex-end; }
.qz-hint { text-align: center; font-size: 12px; }
.qz-result { display: flex; align-items: center; gap: 24px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }
.qz-result h3 { margin: 0 0 4px; }
.qz-ring { width: 110px; height: 110px; border-radius: 50%; background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--surface-2) 0); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.qz-ring span { width: 84px; height: 84px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; }
.qz-big-pts { font-size: 30px; font-weight: 800; color: var(--amber); }
.qz-actions { display: flex; gap: 10px; justify-content: center; }
.qq-choices { display: flex; flex-direction: column; gap: 6px; }
#modal-body label.qq-choice { display: flex !important; align-items: center; gap: 10px; margin: 0; }
#modal-body .qq-choice input[type=radio] { width: auto !important; flex: 0 0 auto; }
@media (max-width: 700px) {
  .qz-choices { grid-template-columns: 1fr; }
  .qz-hero { flex-wrap: wrap; }
  .qz-step { width: 90px; }
  .qz-result { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .qz-timer span, .qz-choice.right, .qz-choice.wrong { animation: none; } }
@media (max-width: 700px) { #modal-body .date-row.q-texts { grid-template-columns: 1fr; } }
#modal-body #q-month { width: 100%; }
@media (max-width: 760px) { html:not(.layout-desktop) #content { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ===== Écoute des appels ===== */
.rec-list { display: flex; flex-direction: column; gap: 6px; }
.rec-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; transition: box-shadow .15s, transform .15s var(--ease-out); }
.rec-row:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.rec-when { display: flex; flex-direction: column; min-width: 92px; font-weight: 700; font-size: 13px; }
.rec-when .muted { font-weight: 500; font-size: 11.5px; }
.rec-who { min-width: 0; }
.rec-preview { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.rec-player { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.rec-player audio { width: 100%; }
.rec-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rec-meta label { display: block; font-size: 11.5px; font-weight: 800; color: var(--text-dim); margin-bottom: 4px; }
.rec-meta select { width: 100%; }
.rec-suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.rec-suggest .chip { cursor: pointer; border: 0; }
.tr-box { padding: 8px; max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.tr-line { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left; font: inherit; color: var(--text); background: none; border: 0; border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.tr-line:hover { background: var(--surface-2); }
.tr-line.now { background: var(--accent-soft); }
.tr-line.caller .tr-text { color: color-mix(in srgb, var(--text) 78%, var(--accent)); }
.tr-time { font-size: 11px; font-weight: 700; color: var(--text-dim); min-width: 34px; font-variant-numeric: tabular-nums; }
.tr-who { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green); flex: 0 0 auto; }
.tr-line.caller .tr-who { background: var(--accent-soft); color: var(--accent); }
.tr-text { line-height: 1.45; }
.rec-wait { display: flex; gap: 8px; align-items: center; padding: 16px; color: var(--text-dim); }
.rec-side .block { margin-top: 0; }
.rec-cmp { margin-top: 8px; font-size: 13px; line-height: 1.45; }
.rec-cmp .info-label { display: block; }
.rec-cons { padding: 10px 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 5px; }
.rec-cons-body { font-size: 12px; max-height: 4.5em; overflow: hidden; }
.rec-hit { display: block; width: 100%; text-align: left; font: inherit; font-size: 12.5px; background: var(--surface-2); border: 0; border-radius: 8px; padding: 5px 8px; cursor: pointer; color: var(--text); }
.rec-hit:hover { background: var(--accent-soft); }
.rec-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ru-progress { margin-top: 10px; font-size: 12.5px; color: var(--text-dim); }
@media (max-width: 1000px) { .rec-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .rec-meta { grid-template-columns: 1fr; } .rec-row { flex-wrap: wrap; } }
.rec-meta select { border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; }

/* ===== Sociétés ===== */
.co-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.co-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.co-card.co-add { justify-content: center; border-style: dashed; color: var(--text-dim); cursor: pointer; font: inherit; font-weight: 700; }
.co-card.co-add:hover { border-color: var(--accent); color: var(--accent); }
/* ===== Parcours client ===== */
.jy-card { padding: 14px 18px; }
.jy-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.jy-progress { width: 140px; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.jy-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--green)); border-radius: 999px; }
.jy-stage { width: auto !important; border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; background: var(--surface-2); font: inherit; font-size: 13px; }
.jy-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.jy-step { display: flex; align-items: flex-start; gap: 12px; padding: 9px 4px; border-top: 1px solid var(--line); }
.jy-step:first-child { border-top: 0; }
.jy-dot { width: 26px; height: 26px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.jy-step.done .jy-dot { background: var(--green); color: #fff; }
.jy-step.next .jy-dot { background: var(--accent); color: #fff; }
.jy-step.next { background: var(--accent-soft); border-radius: 10px; }
.jy-step .muted { font-size: 12.5px; }
.jy-extra { margin-top: 6px; }
.jy-board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.jy-col { flex: 0 0 230px; background: var(--surface-2); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 90px; }
.jy-col.empty { opacity: .6; }
.jy-col-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; padding: 0 4px 4px; }
.jy-kcard { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; transition: transform .12s var(--ease-out), box-shadow .15s; }
.jy-kcard:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.jy-kcard.late { border-left-color: var(--red); }
.jy-kcard.lost { opacity: .55; border-left-color: var(--text-dim); }
.jy-kname { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.jy-knext { color: var(--accent); font-weight: 600; }
.jy-kfoot { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.cr-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.cr-row:last-child { border-bottom: 0; }
.cr-row.done .feed-text { color: var(--text-dim); }
/* ===== Cahier des charges / IA ===== */
.bf-field { align-items: flex-start !important; }
.bf-field .bf-val { width: 100%; margin-top: 4px; }
.bf-con { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; background: var(--surface-2); }
.bf-con .bf-title { flex: 1; font-weight: 700; }
.bf-con textarea { min-height: 70px; margin-top: 6px; }
.ai-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-head { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.ai-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ai-cons { display: flex; flex-direction: column; gap: 8px; }
.ai-con { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.ai-con .muted { font-size: 12px; }
.jy-col.empty { flex: 0 0 48px; min-height: 180px; padding: 8px 4px; opacity: .8; }
.jy-col.empty .jy-col-head { writing-mode: vertical-rl; transform: rotate(180deg); align-items: center; gap: 8px; padding: 6px 0; height: 100%; justify-content: flex-end; }
.jy-col.empty .jy-col-head strong { font-weight: 600; color: var(--text-dim); font-size: 12px; }
.fiche-head h3 .chip + .chip { margin-left: 4px; }


/* --- Consignes Tessy sur la fiche (source vivante) --- */
.tessy-wrap { display: grid; gap: 10px; }
.tessy-lines { display: grid; gap: 4px; font-size: 13px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
.tessy-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tessy-card { border: 1px solid var(--line); border-left: 6px solid var(--ts, #BDC3C7); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.tessy-card.is-alert { border-color: #ca433b; border-left-color: #ca433b; background: var(--hero-red-bg); }
.tessy-card.is-expired { opacity: .55; }
.tessy-card.is-future { border-style: dashed; }
.tessy-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.tessy-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ts, #BDC3C7); flex: none; border: 1px solid rgba(0,0,0,.15); }
.tessy-alert { font-weight: 700; color: var(--hero-red-text); }
.tessy-banner { font-size: 14px; }
.tessy-more { margin-top: 6px; }
.tessy-more summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; }
.tessy-card .kb-content p { margin: 2px 0; }
.ts-green { --ts: #5db75d; } .ts-jade { --ts: #1ABC9C; } .ts-darkgreen { --ts: #186146; } .ts-brightyellow { --ts: #F9D02C; }
.ts-peach { --ts: #F9DEA7; } .ts-yellow { --ts: #e9a33c; } .ts-orange { --ts: #E67E22; } .ts-red { --ts: #ca433b; }
.ts-blue { --ts: #6babe0; } .ts-electricblue { --ts: #205AA0; } .ts-darkblue { --ts: #144A75; } .ts-lightpink { --ts: #FBE7E0; }
.ts-pink { --ts: #FB607F; } .ts-purple { --ts: #B552E3; } .ts-gray { --ts: #BDC3C7; } .ts-darkgray { --ts: #7F8C8D; }
.hist-card summary, .others-card summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hist-card summary::-webkit-details-marker, .others-card summary::-webkit-details-marker { display: none; }
.cs-toolbar { margin-bottom: 12px; }
.cs-summary { padding: 14px; }
.cs-groups-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tessy-expired summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; }
.tessy-expired .tessy-card { margin-top: 8px; }

/* ================= champs de saisie : style unique et moderne (Mon dossier, modales, fiches) ================= */
:root { --field-bg: #fbfcfe; --field-border: #d6dde8; --field-ring: color-mix(in srgb, var(--accent) 18%, transparent); }
[data-theme="dark"] { --field-bg: #1b2634; --field-border: #2f3e52; }
#view-body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.search-input):not([data-key]),
#view-body textarea, #view-body select,
#modal-body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
#modal-body textarea, #modal-body select {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 42px; padding: 9px 14px; font-size: 14px; line-height: 1.35;
  color: var(--text); background: var(--field-bg); border: 1.5px solid var(--field-border); border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#view-body select, #modal-body select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}
#view-body textarea, #modal-body textarea { min-height: 96px; resize: vertical; }
#view-body input:not([type=checkbox]):not([type=radio]):hover, #view-body textarea:hover, #view-body select:hover,
#modal-body input:not([type=checkbox]):not([type=radio]):hover, #modal-body textarea:hover, #modal-body select:hover { border-color: var(--accent-light); }
#view-body input:not([type=checkbox]):not([type=radio]):focus, #view-body textarea:focus, #view-body select:focus,
#modal-body input:not([type=checkbox]):not([type=radio]):focus, #modal-body textarea:focus, #modal-body select:focus {
  outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--field-ring);
}
#view-body input::placeholder, #view-body textarea::placeholder, #modal-body input::placeholder, #modal-body textarea::placeholder { color: var(--text-dim); opacity: .8; }
#view-body input[type=date], #modal-body input[type=date] { font-variant-numeric: tabular-nums; }
#view-body .card > label, #view-body .card div > label, #modal-body label {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--text); margin: 14px 0 6px; letter-spacing: 0;
}
#view-body .card > label .muted, #view-body .card div > label .muted, #modal-body label .muted { font-weight: 500; }
#view-body .date-row, #modal-body .date-row { gap: 14px; }
#view-body .search-input { min-height: 44px; border-width: 1.5px; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; }
#view-body .btn-primary, #modal-body .btn-primary { box-shadow: 0 6px 16px -8px var(--accent); }

/* --- meme style de champs hors des vues : tchat, acces & codes, redaction, page de connexion --- */
.chat-composer textarea, #view-body input[data-key], .rd-textarea, .pw input, #login-form input {
  background: var(--field-bg); border: 1.5px solid var(--field-border); border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#view-body input[data-key] { min-height: 42px; padding: 9px 14px; }
.pw input, #login-form input { width: 100%; min-height: 44px; padding: 10px 14px; font-size: 15px; color: var(--text); }
.chat-composer textarea:hover, #view-body input[data-key]:hover, .rd-textarea:hover, #login-form input:hover { border-color: var(--accent-light); }
.chat-composer textarea:focus, #view-body input[data-key]:focus, .rd-textarea:focus, #login-form input:focus {
  outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--field-ring);
}
#gs-input { border-width: 1.5px; border-color: var(--field-border); }
#gs-input:focus { box-shadow: 0 0 0 4px var(--field-ring); }

/* --- fiche medecin : le centre --- */
.hub-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.hub-actions .muted { flex: 1 1 260px; font-size: 12.5px; }
.hub-sub { margin: 16px 0 8px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.hub-old { margin-top: 12px; }
.hub-old summary { cursor: pointer; color: var(--text-dim); font-weight: 600; padding: 6px 0; }
.hub-old .consigne-card { opacity: .7; }
.hub-scripts { display: flex; flex-wrap: wrap; gap: 8px; }
/* --- popup du jour & annonces --- */
.today-list { display: grid; gap: 10px; }
.today-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); transition: opacity .25s, transform .25s; }
.today-item.done { opacity: 0; transform: translateX(12px); }
.today-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.today-title { font-weight: 700; font-size: 15px; }
.today-body { white-space: pre-wrap; margin-top: 4px; }
.today-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.annonce-card { padding: 12px 16px; margin-bottom: 8px; }
.annonce-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.annonce-head .btn { margin-left: auto; }
.annonce-body { white-space: pre-wrap; margin: 6px 0; }

/* --- bouton rond « + » (ajout contextuel) --- */
#fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
html:not(.layout-desktop) #fab { bottom: 84px; right: 16px; }
.fab-main { width: 58px; height: 58px; border-radius: 50%; border: none; background: var(--accent-grad, var(--accent)); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -8px var(--accent), 0 2px 6px rgba(15, 23, 42, .18);
  transition: transform .18s var(--ease-out), box-shadow .18s ease; }
.fab-main:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 14px 28px -8px var(--accent), 0 3px 8px rgba(15, 23, 42, .2); }
.fab-main:active { transform: scale(.96); }
#fab.open .fab-main { transform: rotate(45deg); }
.fab-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .16s ease, transform .18s var(--ease-out); }
#fab.open .fab-menu { opacity: 1; pointer-events: auto; transform: none; }
.fab-item { display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; }
.fab-label { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; box-shadow: var(--shadow); white-space: nowrap; }
.fab-mini { width: 42px; height: 42px; border-radius: 50%; background: var(--surface); color: var(--accent); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); transition: transform .15s var(--ease-out); }
.fab-item:hover .fab-mini { transform: scale(1.08); background: var(--accent-soft); }
#modal-backdrop:not([hidden]) ~ #fab { display: none; }
@media print { #fab { display: none; } }

/* --- rechercher ou agir --- */
.gs-kbd { font-size: 11px; color: var(--text-dim); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
/* --- barre « Annuler » --- */
.toast.undo { cursor: default; }
.toast .undo-btn { margin-left: 6px; border-radius: 999px; font-weight: 800; color: var(--accent); }
/* --- mode appel --- */
#callmode { position: fixed; inset: 0; z-index: 70; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }
body.callmode-on #fab { display: none; }
.cm-top { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cm-name { font-size: 20px; font-weight: 800; }
.cm-body { flex: 1; overflow: auto; padding: 18px 20px 24px; max-width: 1100px; width: 100%; margin: 0 auto; }
.cm-greeting { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; margin-bottom: 16px; font-size: 22px; font-weight: 800; line-height: 1.3; }
.cm-greeting .muted { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.cm-section { margin-bottom: 16px; }
.cm-section h4 { display: flex; align-items: center; gap: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin: 0 0 8px; }
.cm-card { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--ts, var(--line)); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; font-size: 15px; }
.cm-card strong { display: block; margin-bottom: 2px; }
.cm-card.alert { background: var(--hero-red-bg); border-color: #ca433b; border-left-color: #ca433b; }
.cm-foot { display: flex; gap: 12px; padding: 14px 20px; background: var(--surface); border-top: 1px solid var(--line); flex-wrap: wrap; }
.cm-big { flex: 1 1 240px; min-height: 52px; font-size: 16px; font-weight: 800; border-radius: 14px; }
/* --- visite guidee --- */
#tour { position: fixed; inset: 0; z-index: 80; background: rgba(10, 22, 32, .18); pointer-events: none; }
#tour .tour-card { pointer-events: auto; }
.tour-spot { outline: 4px solid var(--accent); outline-offset: 3px; border-radius: 12px; animation: tourPulse 1.4s ease-in-out infinite; }
@keyframes tourPulse { 0%, 100% { outline-color: var(--accent); } 50% { outline-color: color-mix(in srgb, var(--accent) 35%, transparent); } }
.tour-card { position: fixed; width: 340px; max-width: calc(100vw - 32px); background: var(--surface); color: var(--text); border-radius: 16px; padding: 16px 18px; box-shadow: 0 24px 60px rgba(10, 22, 32, .35); animation: toastIn .38s var(--ease-spring) both; }
.tour-step { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.tour-card h3 { margin: 4px 0 6px; font-size: 17px; }
.tour-card p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
.tour-actions { display: flex; justify-content: flex-end; gap: 8px; }


/* ================= navigation à gauche (choix par personne : Mon compte) ================= */
#sidebar { display: none; }
#nav-side-toggle { display: none; }
@media (min-width: 761px) {
  html.nav-side #sidebar {
    display: flex; flex-direction: column; width: 236px; flex: none; height: 100vh; overflow-y: auto;
    background: var(--surface); border-right: 1px solid var(--border); padding: 12px 10px 14px; gap: 2px;
  }
  html.layout-desktop.nav-side #sidebar { display: flex; }
  html.nav-side #nav-groups, html.nav-side #subnav { display: none; }
  html.nav-side #topbar #brand { display: none; }
  html.nav-side .topbar-row { padding-left: 18px; }
  html.nav-side #nav-side-toggle, html:not(.nav-side) #nav-side-toggle { display: inline-flex; }
}
.sb-brand { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; padding: 6px 10px 12px; letter-spacing: -.01em; }
.sb-group { margin-top: 10px; padding: 0 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.sb-item {
  border: none; background: transparent; color: var(--text); text-align: left; width: 100%;
  padding: 8px 10px; border-radius: 10px; font-weight: 600; font-size: 13.5px;
  display: flex; align-items: center; gap: 9px; transition: background .12s, color .12s;
}
.sb-item:hover { background: var(--accent-soft); }
.sb-item.active { background: var(--accent-grad); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.sb-item .ico-svg { flex: none; }
.sb-item .sb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item .count { background: var(--red); color: #fff; font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.sb-item .count.soft { background: var(--text-dim); }
.sb-item.active .count { background: rgba(255, 255, 255, .28); }
.sb-foot { margin-top: auto; padding-top: 12px; }
.sb-switch { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); width: 100%; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sb-switch:hover { color: var(--text); background: var(--accent-soft); }
#nav-side-toggle { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); width: 36px; height: 36px; border-radius: 12px; align-items: center; justify-content: center; flex: none; }
#nav-side-toggle:hover { background: var(--accent-soft); color: var(--accent); }
#topbar.alert #nav-side-toggle { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }

/* barre laterale en alerte : consignes a lire (meme rouge que la barre du haut) */
html.nav-side #sidebar.alert, html.layout-desktop.nav-side #sidebar.alert { background: linear-gradient(180deg, #c22525, #8f1919); border-right-color: #7d1515; }
#sidebar.alert .sb-brand, #sidebar.alert .sb-group, #sidebar.alert .sb-item { color: #ffe1e1; }
#sidebar.alert .sb-brand .brand-gem { color: #ffd27a; }
#sidebar.alert .sb-item:hover { background: rgba(255, 255, 255, .14); color: #fff; }
#sidebar.alert .sb-item.active { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: none; }
#sidebar.alert .sb-item .count { background: #fff; color: #b02020; }
#sidebar.alert .sb-switch { background: rgba(255, 255, 255, .12); color: #ffe1e1; border-color: transparent; }
.sb-alert { display: flex; align-items: center; gap: 8px; width: 100%; border: none; cursor: pointer; margin: 2px 0 8px;
  background: rgba(0, 0, 0, .22); color: #fff; padding: 9px 10px; border-radius: 10px; font-weight: 700; font-size: 12.5px; text-align: left; }
.sb-alert:hover { background: rgba(0, 0, 0, .32); }

/* --- selecteur avec recherche --- */
.pk { margin-bottom: 4px; }
.pk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pk-chips:empty { display: none; }
.pk-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--text); border-radius: 999px; padding: 4px 6px 4px 6px; font-size: 13px; font-weight: 700; }
.pk-x { border: none; background: transparent; color: var(--text-dim); font-size: 16px; line-height: 1; padding: 0 4px; cursor: pointer; border-radius: 50%; }
.pk-x:hover { color: var(--red); }
.pk-wrap { position: relative; display: flex; align-items: center; }
.pk-wrap .ico-svg { position: absolute; left: 13px; color: var(--text-dim); pointer-events: none; }
#view-body .pk-input, #modal-body .pk-input { padding-left: 36px; }
.pk-list { position: relative; z-index: 5; margin-top: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 36px rgba(10, 22, 32, .14); overflow: hidden; }
.pk-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: transparent; padding: 9px 12px; font-size: 14px; color: var(--text); }
.pk-item:hover, .pk-item.active { background: var(--accent-soft); }
.pk-name { font-weight: 700; }
.pk-suggest { margin-top: 6px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pk-suggest:empty { display: none; }

/* --- tickets : demandes a la supervision --- */
.ticket-head { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.ticket-text { font-size: 15px; font-weight: 600; margin: 4px 0 6px; white-space: pre-wrap; }
.ticket-thread { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.ticket-msg { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.ticket-msg.me { background: var(--accent-soft); }
.ticket-msg > .grow > div:last-child { white-space: pre-wrap; }
.ticket-compose { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.ticket-compose textarea { flex: 1; min-height: 56px !important; }

#tour-bar { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 82; display: flex; align-items: center; gap: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px 6px 14px; box-shadow: 0 12px 30px rgba(10, 22, 32, .22); font-size: 13px; font-weight: 700; max-width: calc(100vw - 24px); }
.tour-bar-txt { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tour-end { border-radius: 999px; background: var(--red); color: #fff; border: none; }
.tour-end:hover { filter: brightness(1.08); }

/* --- barre laterale : prend la couleur choisie dans « Mon compte » (accent), comme le reste --- */
html.nav-side #sidebar { background: linear-gradient(180deg, var(--accent), var(--accent-dark)); border-right: none; color: #fff; }
#sidebar .sb-brand { color: #fff; }
#sidebar .sb-group { color: rgba(255, 255, 255, .62); }
#sidebar .sb-item { color: rgba(255, 255, 255, .88); }
#sidebar .sb-item:hover { background: rgba(255, 255, 255, .14); color: #fff; }
#sidebar .sb-item.active { background: #fff; color: var(--accent); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
#sidebar .sb-item .count { background: #fff; color: var(--accent); }
#sidebar .sb-item.active .count { background: var(--accent); color: #fff; }
#sidebar .sb-item .count.soft { background: rgba(255, 255, 255, .35); color: #fff; }
#sidebar .sb-switch { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }
#sidebar .sb-switch:hover { background: rgba(255, 255, 255, .22); color: #fff; }
html.nav-side #sidebar.alert { background: linear-gradient(180deg, #b91c1c, #7f1d1d); }

/* --- suivi d'etapes (facon suivi de livraison) --- */
.trk { margin: 8px 0; }
.trk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 10px; }
.trk-sub { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.trk-state { font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.trk-right { text-align: right; }
.trk-right .trk-state { font-size: 18px; }
.trk-line { display: flex; align-items: center; gap: 8px; }
.trk-step { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--border); color: var(--text-dim); flex: none; transition: background .3s, color .3s; }
.trk-step.done, .trk-step.now { background: var(--accent); color: #fff; }
.trk-step.now { box-shadow: 0 0 0 5px var(--accent-soft); }
.trk-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.trk-bar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width .6s var(--ease-out); }
.trk-bar.full span { width: 100%; }
.trk-bar.half span { width: 45%; }
.trk-labels { display: flex; justify-content: space-between; margin-top: 6px; gap: 6px; }
.trk-label { font-size: 12px; color: var(--text-dim); font-weight: 600; flex: 1; text-align: center; }
.trk-label:first-child { text-align: left; } .trk-label:last-child { text-align: right; }
.trk-label.now { color: var(--text); font-weight: 800; }
.trk-label .muted { display: block; font-weight: 500; font-size: 11px; }
.trk.compact { margin: 6px 0 4px; max-width: 420px; }
.trk.compact .trk-step { width: 24px; height: 24px; }
.trk.compact .trk-step.now { box-shadow: 0 0 0 3px var(--accent-soft); }
.trk.compact .trk-bar { height: 5px; }

.hub-team { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; margin: -4px 0 12px; }
.doctor-card.has-new { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 15%, transparent); }

/* --- bulle collegue --- */
.person-link { border: none; background: var(--surface-2); color: var(--text); font: inherit; font-weight: 700; padding: 3px 10px 3px 4px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 2px 2px 2px 0; }
.person-link:hover { background: var(--accent-soft); color: var(--accent); }
.person-link.inline { background: none; padding: 0 2px; font-weight: 600; color: var(--text-dim); text-decoration: underline dotted; }
.person-link.inline:hover { color: var(--accent); }
.person-me { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; margin-right: 4px; }
#person-pop { position: fixed; z-index: 75; width: 300px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 18px 44px rgba(10, 22, 32, .22); animation: toastIn .25s var(--ease-spring) both; }
.pp-head { display: flex; align-items: center; gap: 10px; }
.pp-name { font-weight: 800; font-size: 15px; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pp-hint { margin-top: 6px; font-size: 12px; }

.person-link .status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin: 0 2px 0 -2px; background: #cbd5e1; flex: none; }
.person-link .status-dot.online { background: #16a34a; box-shadow: 0 0 0 2px #dcfce7; }
.person-link .status-dot.pause { background: #f59e0b; }
.person-link.inline .status-dot { margin: 0 3px 0 0; width: 7px; height: 7px; }
.person-link.st-online { color: var(--text); }
.hub-online { margin-left: 6px; font-size: 12px; }

/* --- consignes par theme, filtres, recherche --- */
.tz-tools { display: flex; gap: 8px; align-items: center; margin: 8px 0 6px; }
.tz-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tz-chip { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.tz-chip span { background: var(--surface); border-radius: 999px; padding: 0 6px; font-size: 11px; color: var(--text-dim); }
.tz-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.tz-chip.on span { background: rgba(255,255,255,.25); color: #fff; }
.tz-chip.ghost { background: transparent; color: var(--text-dim); }
.tz-group { margin-bottom: 10px; }
.tz-group-head { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); padding: 6px 0; cursor: pointer; list-style: none; }
.tz-group-head::-webkit-details-marker { display: none; }
details.tz-group > .tz-group-head::before { content: '›'; display: inline-block; transition: transform .15s; color: var(--accent); font-size: 16px; }
details.tz-group[open] > .tz-group-head::before { transform: rotate(90deg); }
.tz-alerts .tz-group-head { color: #b91c1c; }
.tz-theme { font-size: 12px; padding: 2px 24px 2px 8px !important; min-height: 26px !important; width: auto !important; margin-left: auto; border-radius: 8px !important; }
.co-theme-row { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 4px 0; }
.tz-legend { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.tz-legend-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 13px; }
.tz-legend-name { min-width: 110px; font-weight: 700; }
.tz-legend-in { flex: 1; min-height: 30px !important; padding: 4px 10px !important; }
mark { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; }
/* --- 5 choses a savoir, nouveautes, questions-reponses --- */
.five-card { padding: 14px 18px; border-left: 6px solid var(--accent); }
.five-list { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.5; }
.five-list li { margin: 4px 0; }
.five-list li::marker { font-weight: 800; color: var(--accent); }
.five-tools { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; }
.news-card { padding: 10px 16px; }
.news-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.news-item:last-child { border-bottom: none; }
.news-text { flex-basis: 100%; font-size: 13px; color: var(--text-dim); }
.faq-card { padding: 6px 16px; }
.faq-row { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.faq-row:last-child { border-bottom: none; }
.faq-q { font-weight: 700; }
.faq-r { margin-top: 4px; padding-left: 20px; }
.faq-draft { padding: 12px 16px; margin-top: 10px; border: 1px dashed var(--accent-light); }
.faq-draft-head { margin-bottom: 8px; }
.faq-edit { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.faq-edit textarea { min-height: 56px !important; }
@media (max-width: 760px) { .faq-edit { grid-template-columns: 1fr; } }
/* --- impression du mode appel --- */
@media print {
  body.callmode-on > :not(#callmode) { display: none !important; }
  #callmode { position: static; height: auto; overflow: visible; background: #fff; color: #000; }
  #callmode .cm-foot, #callmode #cm-quit, #callmode #cm-print, #callmode .btn { display: none !important; }
  #callmode .cm-body { overflow: visible; padding: 0; max-width: none; }
  .cm-card, .cm-greeting { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
}

.five-card.draft { border-left-color: var(--amber); }
.five-edit { display: grid; gap: 6px; }
.five-edit-row { display: flex; align-items: center; gap: 8px; }
.five-num { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.five-in { flex: 1; min-height: 34px !important; padding: 5px 10px !important; }

.tz-scripts { margin-left: auto; display: inline-flex; gap: 4px; flex-wrap: wrap; text-transform: none; letter-spacing: 0; }
.tz-script { border: 1px solid var(--line); background: var(--surface); color: var(--accent); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.tz-script:hover { background: var(--accent-soft); }
.tz-essentials { margin-top: 8px; font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* --- Scripts & process : rendu visuel --- */
.kb-pretty { font-size: 14.5px; }
.kb-pretty h3, .kb-pretty h4 { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.kb-pretty h3::before, .kb-pretty h4::before { content: ''; width: 5px; height: 20px; border-radius: 3px; background: var(--accent); }
.kb-toc { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.kb-toc-head { font-weight: 800; font-size: 12.5px; display: flex; align-items: center; gap: 6px; margin-right: 6px; }
.kb-toc-item { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.kb-toc-item.sub { opacity: .85; }
.kb-toc-item:hover { background: var(--accent-soft); }
.kb-decisions { display: grid; gap: 10px; margin: 10px 0 14px; }
.kb-dec { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface); box-shadow: var(--shadow); }
.kb-dec-q { display: flex; gap: 10px; align-items: flex-start; font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.kb-dec-num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.kb-dec-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kb-dec-col { border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.kb-dec-col.yes { background: #ecfdf5; border: 1px solid #a7f3d0; }
.kb-dec-col.no { background: #fef2f2; border: 1px solid #fecaca; }
.kb-dec-lbl { font-weight: 800; font-size: 11.5px; letter-spacing: .06em; display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.kb-dec-col.yes .kb-dec-lbl { color: #047857; } .kb-dec-col.no .kb-dec-lbl { color: #b91c1c; }
.kb-dec-why { margin-top: 8px; font-size: 12.5px; color: var(--text-dim); display: flex; gap: 6px; align-items: flex-start; }
.kb-dec-why-lbl { font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; color: var(--accent); }
.kb-callout { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 10px 14px; margin: 8px 0; border: 1px solid var(--line); background: var(--surface-2); }
.kb-callout-ic { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.kb-callout-lbl { font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; margin-right: 4px; color: var(--accent); }
.kb-callout.never { background: #fef2f2; border-color: #fecaca; } .kb-callout.never .kb-callout-ic, .kb-callout.never .kb-callout-lbl { background: #fee2e2; color: #b91c1c; }
.kb-callout.always { background: #ecfdf5; border-color: #a7f3d0; } .kb-callout.always .kb-callout-ic, .kb-callout.always .kb-callout-lbl { background: #d1fae5; color: #047857; }
.kb-callout.urgent { background: #fff7ed; border-color: #fed7aa; } .kb-callout.urgent .kb-callout-ic, .kb-callout.urgent .kb-callout-lbl { background: #ffedd5; color: #c2410c; }
.kb-callout.warn { background: #fffbeb; border-color: #fde68a; } .kb-callout.warn .kb-callout-ic, .kb-callout.warn .kb-callout-lbl { background: #fef3c7; color: #b45309; }
.kb-steps { display: grid; gap: 8px; margin: 10px 0; }
.kb-step { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.kb-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-grad); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.kb-say { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: var(--accent-soft); margin: 10px 0; font-size: 15px; }
[data-theme="dark"] .kb-dec-col.yes { background: #052e1f; border-color: #065f46; } [data-theme="dark"] .kb-dec-col.no { background: #3b0a0a; border-color: #7f1d1d; }
[data-theme="dark"] .kb-callout.never { background: #3b0a0a; border-color: #7f1d1d; } [data-theme="dark"] .kb-callout.always { background: #052e1f; border-color: #065f46; }
[data-theme="dark"] .kb-callout.urgent, [data-theme="dark"] .kb-callout.warn { background: #3a2305; border-color: #92400e; }
@media (max-width: 760px) { .kb-dec-cols { grid-template-columns: 1fr; } }

/* --- consignes « comme dans Tessy » : meme ordre, memes couleurs --- */
.tz-mode { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; }
.tz-mode-btn { border: none; background: var(--surface-2); color: var(--text-dim); padding: 7px 12px; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.tz-mode-btn.on { background: var(--accent); color: #fff; }
.tessy-raw-wrap { display: grid; gap: 8px; }
.tessy-raw { border-radius: 10px; padding: 10px 14px; border: 1px solid rgba(0,0,0,.08); }
.tessy-raw-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 4px; }
.tessy-raw-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.35); border: 1px solid rgba(0,0,0,.12); }
.tessy-raw-body { font-size: 14px; }
.tessy-raw-body p { margin: 2px 0; }
.tessy-raw-more { margin-top: 6px; }
.tessy-raw-more summary { cursor: pointer; font-weight: 700; font-size: 12.5px; opacity: .85; }
.tessy-raw-more .kb-content { margin-top: 6px; background: rgba(255,255,255,.55); color: #1c2b3a; border-radius: 8px; padding: 8px 10px; }
.tessy-raw.is-alert { background: #ca433b; color: #fff; border: 2px solid #991b1b; }
.tessy-raw.bg-green { background: #5db75d; color: #fff; } .tessy-raw.bg-jade { background: #1ABC9C; color: #000; } .tessy-raw.bg-darkgreen { background: #186146; color: #fff; }
.tessy-raw.bg-brightyellow { background: #F9D02C; color: #000; } .tessy-raw.bg-peach { background: #F9DEA7; color: #000; } .tessy-raw.bg-yellow { background: #e9a33c; color: #fff; }
.tessy-raw.bg-orange { background: #E67E22; color: #fff; } .tessy-raw.bg-red { background: #ca433b; color: #fff; } .tessy-raw.bg-blue { background: #6babe0; color: #fff; }
.tessy-raw.bg-electricblue { background: #205AA0; color: #fff; } .tessy-raw.bg-darkblue { background: #144A75; color: #fff; } .tessy-raw.bg-lightpink { background: #FBE7E0; color: #000; }
.tessy-raw.bg-pink { background: #FB607F; color: #fff; } .tessy-raw.bg-purple { background: #B552E3; color: #fff; } .tessy-raw.bg-gray { background: #BDC3C7; color: #000; } .tessy-raw.bg-darkgray { background: #7F8C8D; color: #fff; }
.tessy-raw a { color: inherit; text-decoration: underline; }

/* --- consignes Opale lisibles --- */
.consigne-body.rich { white-space: normal; }
.consigne-body.rich p { margin: 4px 0; }
.consigne-body.rich ul { margin: 4px 0; padding-left: 20px; }
.consigne-body.rich li { margin: 2px 0; }
.kb-callout.compact { padding: 7px 10px; margin: 6px 0; font-size: 13.5px; }
.kb-callout.compact .kb-callout-ic { width: 22px; height: 22px; }
/* --- memo de formation : parcours --- */
.memo-progress { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; margin: -4px 0 12px; }
.memo-progress span { display: block; height: 100%; background: var(--green); border-radius: 4px; transition: width .6s var(--ease-out); }
.memo-path { position: relative; }
.memo-path .memo-step { position: relative; }
.memo-path .memo-step:not(:last-of-type)::after { content: ''; position: absolute; left: 31px; top: 100%; width: 2px; height: 9px; background: var(--border); }
.memo-path .memo-step.seen:not(:last-of-type)::after { background: var(--green); }
/* --- accueil : chiffres plus lisibles --- */
.stat-card .num { font-size: 30px; letter-spacing: -.02em; }
.feedback-head .stars { font-size: 17px; }

/* Suivi des lectures & annonces (supervision) */
.lect-card { padding: 12px 16px; margin-bottom: 10px; }
.lect-card.has-pending { border-left: 4px solid var(--red); }
.lect-head { display: flex; align-items: center; gap: 10px; }
.lect-list { margin-top: 8px; }
.lect-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.ann-readers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.annonce-card.is-off { opacity: .7; }
.check-inline { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13.5px; }
.tessy-card .consigne-actions { margin-top: 8px; }

/* Mes medecins (encadrement) : nouveau depuis la prise de service */
.cs-new-doc { margin-bottom: 18px; }
.cs-new-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.cs-new-head .btn { margin-left: auto; }
.tz-toread-m { padding: 12px 16px; margin-bottom: 8px; border-left: 4px solid var(--amber); }
.tz-toread-m .tz-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cs-all-title { margin: 22px 0 8px; }


/* =====================================================================================
   REFONTE 2026 (31/10) — style « verre » + couleurs par société.
   Couche ajoutée en fin de feuille : elle ne change que l'apparence, aucun comportement.
   - html[data-co="telofis"|"styl"] : posé par applyCompanyTheme() (app.js) selon la société affichée ;
     une couleur personnelle choisie dans « Mon compte » reste prioritaire (style en ligne sur <html>).
   - Verre : seulement ce qui flotte (menu, barre du haut, fenêtres, bouton +, onglets du téléphone).
   ===================================================================================== */
:root {
  --btn-a: color-mix(in srgb, var(--accent) 72%, #fff);
  --btn-b: var(--accent);
  --brandbar: linear-gradient(90deg, var(--accent-light), var(--accent));
  --blob1: #cfe3f2; --blob2: #dceaf5; --blob3: #e6eef6;
  --title: #17304f;
  --glass-bg: rgba(255, 255, 255, .56);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-border: rgba(255, 255, 255, .78);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 30px rgba(25, 51, 90, .08);
  --radius: 18px;
  --card-border: rgba(23, 40, 61, .08);
}
html[data-co="telofis"] {
  --accent: #1f6fc0;
  --btn-a: #5aa9ef; --btn-b: #2f80d6;
  --brandbar: linear-gradient(90deg, #6cb6f5, #2f80d6);
  --blob1: #b9dbff; --blob2: #d3e8ff; --blob3: #e1efff;
}
html[data-co="styl"] {
  --accent: #1b7fae;
  --btn-a: #2f557f; --btn-b: #1d314d;
  --brandbar: linear-gradient(90deg, #e42028 0 25%, #1d314d 25% 50%, #20a3dc 50% 75%, #3fb68b 75%);
  --blob1: #c4e6f7; --blob2: #fbdcdc; --blob3: #d6e2ec;
}
[data-theme="dark"] {
  --blob1: #12263a; --blob2: #172a3d; --blob3: #0f1d2b;
  --title: #e7edf5;
  --glass-bg: rgba(22, 32, 44, .62);
  --glass-strong: rgba(22, 32, 44, .84);
  --glass-border: rgba(255, 255, 255, .08);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 30px rgba(0, 0, 0, .3);
  --card-border: rgba(255, 255, 255, .06);
}
html[data-theme="dark"][data-co="styl"] { --btn-a: #3b6a9c; --btn-b: #27466d; }

/* fond : léger dégradé coloré, fixe, derrière tout (c'est lui qui donne vie au verre) */
body { background: var(--bg); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 6% 8%, var(--blob1) 0%, transparent 70%),
    radial-gradient(45% 45% at 94% 0%, var(--blob2) 0%, transparent 70%),
    radial-gradient(50% 60% at 70% 100%, var(--blob3) 0%, transparent 70%),
    var(--bg);
}
#app, #main-col, #content { background: transparent; }

/* --- menu à gauche : panneau de verre flottant --- */
@media (min-width: 761px) {
  html.nav-side #sidebar {
    width: 244px; height: calc(100vh - 24px); margin: 12px 0 12px 12px; padding: 16px 12px 14px;
    border-radius: 24px; border: 1px solid var(--glass-border);
    background: var(--glass-bg); color: var(--text);
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    box-shadow: var(--glass-shadow);
  }
}
#sidebar .sb-brand { color: var(--title); padding: 4px 10px 14px; }
#sidebar .sb-brand .brand-gem { color: var(--accent); }
#sidebar .sb-group { color: var(--text-dim); margin-top: 14px; }
#sidebar .sb-item { color: var(--text); font-size: 14px; padding: 9px 12px; border-radius: 12px; }
#sidebar .sb-item:hover { background: rgba(255, 255, 255, .6); color: var(--text); }
[data-theme="dark"] #sidebar .sb-item:hover { background: rgba(255, 255, 255, .06); }
#sidebar .sb-item.active { background: var(--surface); color: var(--accent); box-shadow: 0 2px 10px rgba(25, 51, 90, .1); }
#sidebar .sb-item .count { background: var(--red); color: #fff; min-width: 20px; height: 20px; border-radius: 10px; font-size: 11px; }
#sidebar .sb-item.active .count { background: var(--red); color: #fff; }
#sidebar .sb-item .count.soft { background: var(--orange-soft); color: var(--orange); }
#sidebar .sb-switch { background: transparent; border-color: var(--card-border); color: var(--text-dim); }
#sidebar .sb-switch:hover { background: rgba(255, 255, 255, .6); color: var(--text); }
/* consignes à lire : le menu reste rouge (lecture obligatoire), en verre rouge */
html.nav-side #sidebar.alert {
  background: linear-gradient(180deg, rgba(200, 32, 32, .94), rgba(140, 24, 24, .94)); border-color: rgba(255, 255, 255, .2);
}
#sidebar.alert .sb-item.active { background: rgba(255, 255, 255, .24); color: #fff; }
#sidebar.alert .sb-item .count { background: #fff; color: #b02020; }

/* --- barre du haut : bandeau de verre flottant --- */
html.nav-side #topbar {
  margin: 12px 20px 0 18px; border-radius: 20px; border: 1px solid var(--glass-border);
  background: var(--glass-bg); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  top: 12px;
}
html.nav-side #topbar.alert { border-color: transparent; }
html.nav-side .topbar-row { padding: 9px 12px 9px 18px; }
#gs-input { border-radius: 12px; }

/* --- contenu --- */
#content-inner { padding-top: 22px; }
#view-header h2 { color: var(--title); font-size: 26px; letter-spacing: -.02em; }
.card, .stat-card { border-radius: var(--radius); border-color: var(--card-border); box-shadow: 0 1px 2px rgba(25, 51, 90, .04); }
.stat-card .num { color: var(--title); }
.stat-card.alert .num { color: var(--red); }
.stat-card.good .num { color: var(--green); }

/* --- boutons : un bouton principal net, les autres discrets --- */
.btn { border-radius: 12px; border-color: var(--card-border); }
.btn-primary {
  background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--btn-b) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn-primary:where(:not(:disabled)):hover { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); filter: brightness(1.06); }
.btn-small { border-radius: 9px; }

/* --- fenêtres (modales) : verre autour, fond net pour lire --- */
#modal {
  border-radius: 22px; border: 1px solid var(--glass-border); background: var(--glass-strong);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
}
#modal-backdrop { background: rgba(14, 28, 46, .32); }

/* --- bouton + flottant et ses raccourcis --- */
.fab-main {
  background: var(--glass-bg); color: var(--accent); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--glass-shadow);
}
.fab-main:hover { box-shadow: 0 14px 28px -10px rgba(25, 51, 90, .35); }
.fab-label, .fab-mini {
  background: var(--glass-strong); border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}

/* --- téléphone : onglets du bas en verre flottant --- */
@media (max-width: 760px) {
  html:not(.layout-desktop) #mobile-tabs {
    left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); border-radius: 22px;
    border: 1px solid var(--glass-border); background: var(--glass-bg); box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  }
  html:not(.layout-desktop) #topbar { background: var(--glass-bg); }
}

/* rappels administratifs de l'accueil (pièces à rendre, disponibilités) : orange, plus jamais rouge
   — le rouge reste réservé aux consignes et aux urgences */
.home-action.red, .home-action.amber {
  background: var(--surface); border-color: var(--card-border); border-left: 4px solid var(--orange);
  border-radius: 16px; box-shadow: 0 1px 2px rgba(25, 51, 90, .04);
}
.home-action.red > .ico-svg, .home-action.amber > .ico-svg { color: var(--orange); }
.home-action.red strong { color: var(--orange); }
/* mode appel : consignes affichées en entier, retours à la ligne conservés */
.cm-card > div { white-space: pre-wrap; }
/* le bouton + ne cache plus le bas des pages */
#content-inner { padding-bottom: 110px; }

/* Mes médecins (secrétaire) : la grande recherche unique, et les collègues sur une seule ligne discrète */
.doc-toolbar .search-wrap { flex: 1; }
.doc-toolbar .search-input { font-size: 15px; padding-top: 12px; padding-bottom: 12px; border-radius: 14px; }
.doctor-card { border-radius: 16px; }
.doctor-card .doc-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; opacity: .8; }
/* résultats de recherche dans les consignes Tessy */
.ts-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-bottom: 6px; }
.ts-hit { text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--card-border); border-left: 4px solid var(--accent); }
.ts-hit:hover { box-shadow: var(--shadow-lift); }
.ts-hit.alert { border-left-color: var(--red); }
.ts-hit-doc { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.ts-hit-txt { font-size: 13px; color: var(--text); line-height: 1.45; }
.ts-hit mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* « ? » à côté du titre : explication de la page, repliée par défaut */
.view-intro { display: none; }
html.show-intros .view-intro { display: block; background: var(--surface); border: 1px solid var(--card-border); border-left: 4px solid var(--accent);
  border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px; color: var(--text); line-height: 1.5; }
#view-header .view-help { margin-right: auto; margin-left: -4px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--card-border);
  background: var(--surface); color: var(--text-dim); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
#view-header .view-help:hover, html.show-intros #view-header .view-help { color: #fff; background: var(--accent); border-color: transparent; }
/* Suivi des lectures */
.lect-stats { margin-bottom: 14px; }
.lect-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lect-toolbar select { min-width: 280px; border-radius: 12px; padding: 9px 12px; border: 1px solid var(--card-border); background: var(--surface); }
.lect-uptodate { padding: 12px 16px; color: var(--text-dim); font-size: 13.5px; line-height: 1.7; }
.lect-uptodate > .ico-svg { color: var(--green); vertical-align: -2px; }
/* « Mon compte » : pastille « couleurs de la société » (aucune couleur personnelle) */
.accent-swatch.co-swatch { background: conic-gradient(#2f80d6 0 50%, #1d314d 50% 75%, #e42028 75%) !important; }
/* mode sombre : fonds de couleur sombres, quelle que soit la société */
html[data-theme="dark"][data-co] { --blob1: #12263a; --blob2: #172a3d; --blob3: #0f1d2b; }
html[data-theme="dark"][data-co="styl"] { --blob2: #2a1a24; }
/* téléphonie pas encore branchée : un encart clair au lieu de graphiques vides */
.not-connected { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-left: 4px solid var(--accent); margin-bottom: 14px; }
.not-connected > .ico-svg { color: var(--accent); flex: none; margin-top: 2px; }
.not-connected strong { display: block; margin-bottom: 2px; color: var(--title); }
#view-body:has(> .not-connected) .chart-card { display: none; }
/* un seul bouton principal fort par écran (en haut à droite) : les petits boutons d'action dans les listes
   deviennent discrets, couleur de la société sur fond pâle (« J'ai lu » reste vert, inchangé) */
#view-body .btn-primary.btn-small {
  background: var(--accent-soft); color: var(--accent); border-color: transparent; box-shadow: none;
}
#view-body .btn-primary.btn-small:where(:not(:disabled)):hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); filter: none; transform: none; }
/* zones de page encore vides (résultats de recherche, annonces…) : ne prennent pas de place tant qu'elles sont vides */
#view-body > div:empty { display: none; }

/* onglets d'un compartiment (menu regroupé), au-dessus du titre de la page */
#hub-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 14px; padding: 4px; border-radius: 14px; width: fit-content; max-width: 100%;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); }
.hub-tab { border: none; background: transparent; color: var(--text-dim); font-weight: 650; font-size: 13.5px; padding: 8px 14px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hub-tab:hover { color: var(--text); background: rgba(255, 255, 255, .5); }
[data-theme="dark"] .hub-tab:hover { background: rgba(255, 255, 255, .06); }
.hub-tab.active { background: var(--surface); color: var(--accent); box-shadow: 0 2px 8px rgba(25, 51, 90, .1); }
.hub-tab .count { background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.hub-tab .count.soft { background: var(--orange-soft); color: var(--orange); }
.sec-export-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.lect-head .lect-remind { margin-left: 8px; }

/* Refonte : société en haut du menu, personne connectée en bas (comme la maquette validée) */
#sidebar > #sb-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
#sb-co { margin: 0 0 6px; }
#sb-co:empty, #sb-me:empty { display: none; }
#sb-co #company-tabs { display: flex; width: 100%; border-radius: 14px; padding: 3px; background: rgba(255, 255, 255, .55); border-color: var(--card-border); }
[data-theme="dark"] #sb-co #company-tabs { background: rgba(255, 255, 255, .05); }
#sb-co .company-tab { flex: 1; justify-content: center; border-radius: 11px; padding: 7px 8px; font-size: 12.5px; min-width: 0; }
#sb-co .company-tab .co-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sb-co .company-tab:not(.active) .co-name { display: inline; }
#sb-me { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--card-border); }
#sb-me #me-chip { width: 100%; padding: 8px 8px 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .6); border: 1px solid var(--card-border); }
[data-theme="dark"] #sb-me #me-chip { background: rgba(255, 255, 255, .05); }
#sb-me #me-chip:hover { background: var(--surface); }
#sb-me #me-meta { display: block !important; flex: 1; min-width: 0; }
#sb-me #me-name, #sb-me #me-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sb-me #btn-logout { margin-left: auto; flex: none; }
/* menu en alerte rouge (consignes à lire) : société et personne restent lisibles */
#sidebar.alert #sb-co #company-tabs, #sidebar.alert #sb-me #me-chip { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .2); }
#sidebar.alert #sb-co .company-tab { color: #ffe1e1; }
#sidebar.alert #sb-co .company-tab.active { background: rgba(255, 255, 255, .9); color: #8f1919; }
#sidebar.alert #me-name { color: #fff; } #sidebar.alert #me-role { color: #ffe1e1; }
#sidebar.alert #btn-logout { color: #fff; }
/* barre du haut allégée : la recherche commence à gauche, « Prendre mon service » à droite */
html.nav-side .topbar-spacer { display: flex; }
html.nav-side #global-search { margin-left: 0; margin-right: auto; width: min(520px, 100%); }

/* Fiche médecin : « On en a parlé » (dernières discussions qui citent le médecin) */
.talk-list { padding: 4px; }
.talk-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 12px; border-radius: 12px; }
.talk-row + .talk-row { border-top: 1px solid var(--card-border); border-radius: 0; }
.talk-row:hover { background: var(--accent-soft); border-radius: 12px; }
.talk-meta { display: block; font-size: 12.5px; color: var(--text-dim); }
.talk-meta strong { color: var(--text); }
.talk-meta .ico-svg { vertical-align: -2px; }
.talk-txt { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text); line-height: 1.45; }
.talk-txt mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.talk-priv { font-size: 10.5px; padding: 1px 7px; }
.talk-go { color: var(--text-dim); font-size: 18px; line-height: 1; align-self: center; }
/* Discussion : mention de transparence dans les conversations privées */
.chat-privacy { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-dim); background: var(--surface-2); padding: 7px 14px; border-bottom: 1px solid var(--card-border); }

/* ================= Refonte messagerie (31/10) ================= */
.chat-layout.three { grid-template-columns: 240px 1fr 300px; }
.msg { position: relative; }
.msg:hover { background: var(--surface-2); }
.msg-tools { display: none; position: absolute; right: 8px; top: -14px; z-index: 3; gap: 2px; padding: 3px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--card-border); box-shadow: 0 6px 16px rgba(25, 51, 90, .12); }
.msg:hover .msg-tools { display: flex; }
.msg-tools button { border: 0; background: transparent; font-size: 13px; padding: 4px 7px; border-radius: 7px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.msg-tools button:hover { background: var(--surface-2); color: var(--text); }
.msg.important { background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 22%, transparent); margin: 4px 0; }
.tag.imp-tag { background: var(--red); color: #fff; display: inline-flex; align-items: center; gap: 4px; }
.msg-ack { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ack-done { color: var(--green); font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.msg-reacts { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.react { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--card-border); }
.react.mine { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 700; }
.msg-thread { border: 0; background: transparent; padding: 4px 0 0; color: var(--accent); font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.msg-thread:hover { text-decoration: underline; }
.msg-doc { display: inline-flex; align-items: center; gap: 10px; margin-top: 7px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--card-border);
  background: var(--surface); text-align: left; max-width: 420px; }
.msg-doc > .ico-svg { color: var(--green); }
.msg-doc strong { display: block; font-size: 13px; } .msg-doc small { display: block; color: var(--text-dim); font-size: 11.5px; }
.msg-doc:hover { border-color: var(--accent); }
.chat-pin { display: flex; align-items: center; gap: 9px; margin: 8px 14px 0; padding: 9px 12px; border-radius: 12px; background: var(--orange-soft); color: var(--text); font-size: 13px; }
.chat-pin > .ico-svg { color: var(--orange); flex: none; }
.chat-pin strong { color: var(--orange); }
.chat-quick { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 12px 0; }
.chat-q { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--card-border); color: var(--text); }
.chat-q:hover { background: var(--accent-soft); color: var(--accent); }
.chat-tools { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 12px; }
.chat-tool { font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 9px; background: var(--surface-2); border: 1px solid transparent; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; }
.chat-tool:hover { color: var(--text); }
.chat-tool.on { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.chat-tool.imp.on { background: var(--red-soft); color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.chat-composer { border-top: 1px solid var(--card-border); }
.thread-panel { display: flex; flex-direction: column; height: calc(100vh - 275px); min-height: 340px; padding: 0; overflow: hidden; }
.thread-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--card-border); }
.thread-head h4 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.thread-msgs { flex: 1; overflow-y: auto; padding: 10px 10px; }
.thread-msgs .msg.thread-root { background: var(--surface-2); margin-bottom: 6px; }
.thread-composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--card-border); }
.thread-composer textarea { flex: 1; resize: none; border-radius: 12px; border: 1px solid var(--card-border); padding: 8px 10px; font: inherit; font-size: 13.5px; background: var(--surface); }
.chat-search-res { margin-top: 10px; max-height: 60vh; overflow-y: auto; }
/* Discussion : le bouton + flottant ne recouvre pas les boutons d'envoi */
html:has(.chat-layout) #fab { bottom: 130px; }
/* Boîte de réception : lecture à droite sur grand écran (comme une messagerie) */
.nb-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.nb-reader { position: sticky; top: 90px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 120px); overflow-y: auto; }
.nb-reader .nb-tag { align-self: flex-start; }
.nb-r-title { margin: 0; font-size: 18px; color: var(--title); line-height: 1.3; }
.nb-r-from { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.nb-r-body .nb-full, .nb-r-body p { white-space: pre-wrap; line-height: 1.6; font-size: 14px; color: var(--text); margin: 0; }
.nb-r-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 6px; border-top: 1px solid var(--card-border); }
.nb-reader-empty { text-align: center; color: var(--text-dim); padding: 30px 10px; }
.nb-split .nb-item.open { background: var(--accent-soft); }

/* ================= Refonte : fond du menu de gauche aux couleurs de la société ================= */
/* Stylrendez-vous : bandeau de la marque (dégradé bleu nuit → bleu ciel, carrés translucides, filet tricolore) */
html[data-co="styl"].nav-side #sidebar:not(.alert) {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='244' height='240' viewBox='0 0 244 240'%3E%3Cg fill='none' stroke-width='2'%3E %3Crect x='176' y='-34' width='84' height='84' rx='13' transform='rotate(16 218 8)' stroke='rgba(255,255,255,.34)'/%3E %3Crect x='-30' y='150' width='58' height='58' rx='10' transform='rotate(-14 -1 179)' stroke='rgba(255,255,255,.24)'/%3E %3Cline x1='0' y1='96' x2='46' y2='60' stroke='rgba(255,255,255,.2)'/%3E%3C/g%3E%3C/svg%3E") no-repeat top center / 100% auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='244' height='300' viewBox='0 0 244 300'%3E%3Cg fill='none' stroke-width='2'%3E %3Crect x='-26' y='40' width='52' height='52' rx='9' transform='rotate(12 0 66)' stroke='rgba(255,255,255,.22)'/%3E %3Crect x='206' y='120' width='62' height='62' rx='10' transform='rotate(20 237 151)' stroke='rgba(228,32,40,.8)'/%3E %3Crect x='54' y='238' width='92' height='92' rx='14' transform='rotate(-10 100 284)' stroke='rgba(255,255,255,.26)'/%3E %3Crect x='196' y='262' width='54' height='54' rx='9' transform='rotate(14 223 289)' stroke='rgba(255,255,255,.3)'/%3E %3Cline x1='0' y1='210' x2='58' y2='300' stroke='rgba(255,255,255,.18)'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom center / 100% auto,
    linear-gradient(170deg, #0d2f57 0%, #12528f 38%, #1d86c6 72%, #2aa8de 100%);
  border-color: rgba(255, 255, 255, .18); color: #fff;
}
html[data-co="styl"].nav-side #sidebar:not(.alert)::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 4px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #e42028 0 34%, #1d314d 34% 52%, #20a3dc 52% 78%, #3fb68b 78%);
}
/* Telofis : dégradé bleu du site, halos ronds et doux */
html[data-co="telofis"].nav-side #sidebar:not(.alert) {
  background:
    radial-gradient(120px 120px at 85% 8%, rgba(255, 255, 255, .22), transparent 70%),
    radial-gradient(160px 160px at 10% 55%, rgba(255, 255, 255, .12), transparent 70%),
    radial-gradient(140px 140px at 90% 92%, rgba(173, 216, 255, .35), transparent 70%),
    linear-gradient(170deg, #1b4f8e 0%, #2a73c4 45%, #4d9be6 80%, #74b9f2 100%);
  border-color: rgba(255, 255, 255, .22); color: #fff;
}
html[data-co].nav-side #sidebar { position: relative; overflow: hidden; }
/* textes et éléments du menu en blanc sur ces fonds */
html[data-co] #sidebar:not(.alert) .sb-brand, html[data-co] #sidebar:not(.alert) .sb-brand .brand-gem { color: #fff; }
html[data-co] #sidebar:not(.alert) .sb-group { color: rgba(255, 255, 255, .68); }
html[data-co] #sidebar:not(.alert) .sb-item { color: rgba(255, 255, 255, .92); }
html[data-co] #sidebar:not(.alert) .sb-item:hover { background: rgba(255, 255, 255, .14); color: #fff; }
html[data-co] #sidebar:not(.alert) .sb-item.active { background: #fff; color: var(--accent); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
html[data-co] #sidebar:not(.alert) .sb-item .count.soft { background: rgba(255, 255, 255, .25); color: #fff; }
html[data-co] #sidebar:not(.alert) .sb-item.active .count.soft { background: var(--orange-soft); color: var(--orange); }
html[data-co] #sidebar:not(.alert) #sb-co #company-tabs { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); }
html[data-co] #sidebar:not(.alert) #sb-co .company-tab { color: rgba(255, 255, 255, .85); }
html[data-co] #sidebar:not(.alert) #sb-co .company-tab.active { background: #fff; color: var(--title); }
html[data-co] #sidebar:not(.alert) #sb-me { border-top-color: rgba(255, 255, 255, .2); }
html[data-co] #sidebar:not(.alert) #sb-me #me-chip { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .2); }
html[data-co] #sidebar:not(.alert) #sb-me #me-chip:hover { background: rgba(255, 255, 255, .22); }
html[data-co] #sidebar:not(.alert) #me-name { color: #fff; }
html[data-co] #sidebar:not(.alert) #me-role { color: rgba(255, 255, 255, .75); }
html[data-co] #sidebar:not(.alert) #btn-logout { background: rgba(255, 255, 255, .16); color: #fff; }
html[data-co] #sidebar:not(.alert) #sb-nav { scrollbar-color: rgba(255, 255, 255, .3) transparent; }
/* logo Telofis (personnage au casque) : image, gardée dans ses proportions */
img.co-logo { object-fit: contain; flex: none; display: inline-block; }
/* sur le fond bleu du menu, l'onglet inactif garde un médaillon clair pour que le personnage gris reste lisible */
html[data-co] #sidebar:not(.alert) #sb-co .company-tab img.co-logo { background: rgba(255, 255, 255, .85); border-radius: 50%; padding: 1px; }

/* Bilan du jour : bilan rédigé par l'IA locale + messages suggérés */
.bilan-ai { padding: 16px 18px; border-left: 4px solid var(--accent); }
.bai-text { white-space: pre-wrap; line-height: 1.6; font-size: 14px; }
.bai-foot { margin-top: 12px; display: flex; gap: 8px; }
.bai-wait { display: flex; align-items: center; gap: 10px; color: var(--text-dim); margin: 0; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .8s linear infinite; display: inline-block; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.bai-sugg { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.bai-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.bai-card.is-sent { opacity: .7; }
.bai-who { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bai-who select { font-size: 13px; border-radius: 9px; padding: 4px 8px; }
.bai-why { font-size: 12.5px; }
.bai-msg { width: 100%; border-radius: 12px; border: 1px solid var(--card-border); padding: 9px 11px; font: inherit; font-size: 13.5px; resize: vertical; background: var(--surface); }
.bai-acts { display: flex; gap: 8px; }
.bai-sent-txt { font-size: 13.5px; color: var(--text-dim); white-space: pre-wrap; }

/* ================= Appels vocaux internes ================= */
.glass-pop { background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: 0 18px 40px rgba(14, 28, 46, .22);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.rtc-bar { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 16px; border-radius: 999px; max-width: calc(100vw - 24px); animation: rtcIn .25s ease; }
.rtc-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.rtc-info strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.rtc-info .muted { font-size: 11.5px; }
.rtc-rec { color: var(--red); font-weight: 800; font-size: 11.5px; animation: pulse 1.6s infinite; }
.rtc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); flex: none; }
.rtc-dot.on { background: #22a35a; box-shadow: 0 0 0 4px rgba(34, 163, 90, .2); }
.rtc-avs { display: flex; } .rtc-avs .avatar { margin-left: -6px; border: 2px solid var(--surface); }
.rtc-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--surface); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; flex: none; transition: transform .12s, background .12s; }
.rtc-btn:hover { transform: scale(1.06); }
.rtc-btn.off { background: var(--red-soft); color: var(--red); }
.rtc-btn.on { background: var(--accent-soft); color: var(--accent); }
.rtc-btn.rec { background: var(--red); color: #fff; }
.rtc-btn.ok { background: #22a35a; color: #fff; border-color: transparent; }
.rtc-btn.end { background: #d33030; color: #fff; border-color: transparent; }
.rtc-btn.end .ico-svg { transform: rotate(135deg); }
.rtc-ring { position: fixed; right: 22px; bottom: 96px; z-index: 95; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px;
  min-width: 300px; animation: modalIn .3s var(--ease-spring, ease) both; }
.rtc-ring strong { display: block; font-size: 15px; }
.rtc-ring .rtc-btn { width: 46px; height: 46px; }
.rtc-ring .rtc-btn.ok { animation: rtcShake 1.1s infinite; }
@keyframes rtcShake { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } }
.rtc-screens { position: fixed; right: 22px; top: 76px; z-index: 85; width: min(480px, 46vw); padding: 10px; border-radius: 18px; display: flex; flex-direction: column; gap: 8px; }
.rtc-screens.big { left: 50%; transform: translateX(-50%); width: min(1200px, 94vw); }
.rtc-scr-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.rtc-scr-h .btn { margin-left: auto; }
.rtc-scr video { width: 100%; border-radius: 12px; background: #000; display: block; }
.rtc-mini { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--surface);
  color: var(--green); display: none; align-items: center; justify-content: center; flex: none; }
.presence-panel .member:hover .rtc-mini { display: inline-flex; }
.rtc-call-btn { margin-left: 8px; }
.rtc-salon { border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; background: var(--surface-2); border: 1px solid var(--card-border); display: flex; flex-direction: column; gap: 8px; }
.rtc-salon.in { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.rtc-salon-h { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rtc-salon-h .muted { margin-left: auto; }
.rtc-salon-m { display: flex; flex-wrap: wrap; gap: 3px; }
.rtc-salon-join { margin-bottom: 10px; }
@media (max-width: 760px) { .rtc-bar { top: auto; bottom: calc(84px + env(safe-area-inset-bottom)); } .rtc-info strong { max-width: 130px; } .rtc-ring { left: 10px; right: 10px; min-width: 0; } }
@keyframes rtcIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }