/* Livana — Dashboard psychologue (desktop)
   Construit sur les tokens du design system Livana. */

:root {
  /* Neutres chauds */
  --bg: #eeece3;
  --surface: #ffffff;
  --surface-2: #e9e7dd;
  --border: #dcd8cc;
  --border-strong: #c5c0b1;
  --text: #121210;
  --text-2: #45453e;
  --text-3: #77766c;

  /* Accent sauge */
  --accent: oklch(0.58 0.11 178);
  --accent-soft: oklch(0.93 0.05 178);
  --accent-dark: oklch(0.40 0.10 180);

  --online: oklch(0.60 0.19 150);
  --online-soft: oklch(0.95 0.06 145);

  --danger: oklch(0.56 0.18 25);
  --danger-soft: oklch(0.94 0.045 25);
  --warn: oklch(0.68 0.15 70);
  --warn-soft: oklch(0.95 0.07 78);

  --c-teal: oklch(0.58 0.11 190);
  --c-blue: oklch(0.56 0.14 250);
  --c-violet: oklch(0.54 0.15 295);
  --c-amber: oklch(0.66 0.14 68);
  --c-rose: oklch(0.60 0.16 12);
  --c-green: oklch(0.60 0.15 150);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(28,28,26,0.05), 0 2px 5px -2px rgba(28,28,26,0.07);
  --shadow-md: 0 6px 18px -6px rgba(28,28,26,0.14), 0 3px 8px -3px rgba(28,28,26,0.09);
  --shadow-lg: 0 26px 56px -18px rgba(28,28,26,0.26), 0 10px 24px -10px rgba(28,28,26,0.15);

  --sidebar-w: 76px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
}

/* Accent themes (tweaks) */
.theme-sage      { --accent: oklch(0.62 0.07 175); --accent-soft: oklch(0.94 0.025 175); --accent-dark: oklch(0.42 0.06 175); }
.theme-rose      { --accent: oklch(0.62 0.09 25);  --accent-soft: oklch(0.95 0.03 25);   --accent-dark: oklch(0.44 0.08 25); }
.theme-lavender  { --accent: oklch(0.55 0.09 295); --accent-soft: oklch(0.95 0.025 295); --accent-dark: oklch(0.40 0.08 295); }
.theme-ocean     { --accent: oklch(0.56 0.10 235); --accent-soft: oklch(0.95 0.03 235);  --accent-dark: oklch(0.40 0.09 235); }
.theme-amber     { --accent: oklch(0.66 0.11 75);  --accent-soft: oklch(0.95 0.04 80);   --accent-dark: oklch(0.46 0.10 60); }
.theme-plum      { --accent: oklch(0.48 0.12 340); --accent-soft: oklch(0.95 0.035 340); --accent-dark: oklch(0.36 0.10 340); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }
::selection { background: var(--accent-soft); }
#root { height: 100%; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ───────────────────────── App shell ───────────────────────── */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 22px 16px 16px;
}
/* Slim icon-only rail sidebar */
.sidebar-rail { padding: 18px 0 16px; align-items: center; }
.sidebar-rail .sb-brand { padding: 0 0 12px; justify-content: center; }
.sb-orb-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 0 0 14px; margin-bottom: 8px; position: relative;
  border-bottom: 1px solid var(--border);
}
.sb-orb {
  display: block;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, oklch(0.85 0.06 175), var(--accent));
  box-shadow: 0 3px 10px -3px oklch(0.62 0.07 175 / 0.55);
  transition: transform 0.14s ease;
}
.sb-item:hover .sb-orb { transform: scale(1.1); }
.sidebar-rail .sb-nav { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.sidebar-rail .sb-item {
  width: 64px; height: auto; padding: 8px 2px 6px; border-radius: 13px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; position: relative;
}
.sidebar-rail .sb-item .sb-ic { opacity: 1; }
/* Libellé sous l'icône (même esprit que .mnav-lbl sur mobile) — jamais de retour à la ligne */
.sb-item-lbl { font-size: 9.5px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; line-height: 1; }
.sidebar-rail .sb-item-badge {
  position: absolute; top: 4px; right: 4px; margin: 0;
  min-width: 16px; height: 16px; padding: 0 4px; font-size: 9.5px;
}
.sidebar-rail .sb-rail-icon {
  width: 64px; height: auto; padding: 7px 2px 5px; border-radius: 12px; color: var(--text-3);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; position: relative; transition: background 0.14s ease, color 0.14s ease;
}
/* Libellé sous les icônes du bas du rail — même esprit que .sb-item-lbl */
.sb-rail-lbl { font-size: 9.5px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; line-height: 1; }

/* Résidents : pastille « Voir la fiche résident » (visuelle — c'est la ligne
   entière qui reste cliquable, pas ce bouton) */
.res-table .td-open { text-align: right; }
.res-open-wrap {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px 5px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
}
.res-table tbody tr:hover .res-open-wrap,
.res-mrow:hover .res-open-wrap {
  background: var(--accent); color: #fff;
}
.sidebar-rail .sb-rail-icon:hover { background: var(--surface-2); color: var(--text); }
.sidebar-rail .sb-rail-avatar { width: 40px; height: 40px; font-size: 13px; margin-top: 8px; position: relative; }

/* rail tooltips */
.sidebar-rail [data-tip]::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: var(--text); color: var(--bg); font-size: 12px; font-weight: 500; white-space: nowrap;
  padding: 6px 10px; border-radius: 8px; box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transition: opacity 0.13s ease; z-index: 60;
}
.sidebar-rail [data-tip]:hover::after { opacity: 1; }

.sb-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 2px 8px 22px;
}
.sb-logo {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px -2px oklch(0.62 0.07 175 / 0.5);
}
.sb-logo-img {
  background: transparent; box-shadow: none; border-radius: 8px;
  overflow: hidden;
}
.sb-logo-img img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-rail .sb-logo-img { width: 40px; height: 40px; }
.sb-wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1;
}
.sb-estab { font-size: 11px; color: var(--text-3); letter-spacing: 0.02em; margin-top: 1px; }

.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-nav-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); padding: 14px 12px 6px;
}
.sb-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--text-2);
  text-align: left; width: 100%;
  transition: background 0.14s ease, color 0.14s ease;
  position: relative;
}
.sb-item:hover { background: var(--surface-2); color: var(--text); }
.sb-item.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.sb-item .sb-ic { flex-shrink: 0; opacity: 0.9; }
.sb-item-badge {
  margin-left: auto;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sb-item.active .sb-item-badge { background: var(--accent-dark); }

.sb-spacer { flex: 1; }

/* SAV button in sidebar */
.sb-support {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; margin: 0 0 10px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); width: 100%; text-align: left;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.sb-support:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.sb-support-ic {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-dark);
  display: inline-flex; align-items: center; justify-content: center;
}
.sb-support-meta { flex: 1; min-width: 0; }
.sb-support-title { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.sb-support-sub { display: block; font-size: 11px; color: var(--text-3); }

/* SAV modal */
.sav-backdrop {
  position: fixed; inset: 0; z-index: 300; background: rgba(20,20,18,0.46);
  display: flex; align-items: center; justify-content: center; padding: 32px;
  backdrop-filter: blur(2px);
}
.sav-modal {
  width: min(440px, 96vw); height: min(620px, 88vh);
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column;
  animation: popIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.sav-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--accent-soft) 50%, var(--surface));
}
.sav-head-av {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.sav-head-greet { font-size: 11px; color: var(--text-3); }
.sav-head-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sav-online { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: oklch(0.45 0.13 150); }
.sav-online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--online); animation: in-call-pulse 1.8s ease-in-out infinite; }
.sav-thread { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--surface-2); }
.sav-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 9px; padding: 20px; }
.sav-empty-ic { width: 58px; height: 58px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; }
.sav-empty-title { font-size: 16px; font-weight: 600; }
.sav-empty-sub { font-size: 12.5px; color: var(--text-2); max-width: 280px; line-height: 1.5; }
.sav-msg { display: flex; gap: 9px; max-width: 86%; }
.sav-msg.user { align-self: flex-end; }
.sav-msg.assistant { align-self: flex-start; }
.sav-msg-av { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; }
.sav-bubble { padding: 10px 14px; border-radius: 15px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.sav-msg.assistant .sav-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.sav-msg.user .sav-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.sav-suggest { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 12px; background: var(--surface-2); }
.sav-composer { padding: 12px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.sav-hint { font-size: 10.5px; color: var(--text-3); text-align: center; margin-top: 8px; }

.sb-secure {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; margin: 8px 4px 12px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11.5px; line-height: 1.35;
}
.sb-secure svg { flex-shrink: 0; }

.sb-user {
  display: flex; align-items: center; gap: 11px;
  padding: 10px; border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.sb-logout {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); background: transparent; transition: all 0.14s ease;
}
.sb-logout:hover { background: var(--danger-soft); color: var(--danger); }
.sb-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px; flex-shrink: 0;
}
.sb-user-meta { min-width: 0; flex: 1; }
.sb-user-name { display: block; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { display: block; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ───────────────────────── Main ───────────────────────── */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.topbar {
  height: 64px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 80%, transparent);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 16px;
  padding: 0 28px;
}
.topbar-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.topbar-sub { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.topbar-search {
  margin-left: auto;
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 15px;
  width: 280px; color: var(--text-3);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.topbar-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.topbar-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 13.5px; color: var(--text); }
.topbar-search input::placeholder { color: var(--text-3); }
.topbar-icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; transition: all 0.15s ease;
}
.topbar-icon-btn:hover { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-soft); }
.topbar-icon-dot {
  position: absolute; top: 7px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); border: 2px solid var(--surface);
}

/* scrollbar-gutter both-edges : réserve la place de la barre de défilement des
   DEUX côtés, pour que le contenu reste centré (sinon la barre pousse tout vers
   la gauche et la marge de droite paraît plus grosse, surtout sur mobile). */
.scroll-area { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable both-edges; }
/* Sauf la page Copilot : son chat est plein cadre (fond blanc bord à bord), la
   gouttière réservée y laisserait deux liserés de fond de page à gauche et à
   droite. Le fil de conversation défile dans son propre conteneur. */
.scroll-area.scroll-area-chat { scrollbar-gutter: auto; overflow-y: hidden; }
.page { padding: 28px; max-width: 1320px; margin: 0 auto; }
.page-wide { max-width: 100%; }

/* ───────────────────────── Generic bits ───────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.section-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--radius);
  font-size: 13.5px; font-weight: 600;
  transition: transform 0.06s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn svg { width: 17px; height: 17px; }
.btn-sm svg { width: 16px; height: 16px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:active { transform: none; }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: #000; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); }
.btn-soft { background: var(--accent-soft); color: var(--accent-dark); }
.btn-soft:hover { background: color-mix(in oklch, var(--accent-soft) 70%, var(--accent) 30%); }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 10px; }

/* mood pill */
.mood-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--text-2);
}
.mood-pill .e { font-size: 13px; line-height: 1; }
.mood-pill.tinted { background: color-mix(in oklch, var(--mc) 32%, var(--surface)); color: color-mix(in oklch, var(--mc) 70%, var(--text)); }

.in-call-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--online-soft); color: oklch(0.42 0.13 150);
  border: 1px solid oklch(0.86 0.07 145);
}
.in-call-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--online);
  animation: in-call-pulse 1.6s ease-in-out infinite;
}
@keyframes in-call-pulse {
  0% { box-shadow: 0 0 0 0 oklch(0.62 0.18 150 / 0.55); }
  70% { box-shadow: 0 0 0 6px oklch(0.62 0.18 150 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.62 0.18 150 / 0); }
}

.trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; }
.trend.up { color: oklch(0.55 0.13 150); }
.trend.down { color: var(--danger); }
.trend.flat { color: var(--text-3); }
.info-tip { display: inline-flex; align-items: center; position: relative; color: var(--text-3); cursor: help; vertical-align: -2px; }
.info-tip:hover { color: var(--accent-dark); }
.info-tip::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); font-size: 11px; font-weight: 500; white-space: nowrap;
  padding: 6px 9px; border-radius: 7px; box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transition: opacity 0.13s ease; z-index: 20;
}
.info-tip:hover::after { opacity: 1; }

/* avatars by mood ring */
.avatar {
  border-radius: 50%;
  /* Couleur d'identité par résident (--av) : fond teinté + initiales foncées.
     Repli neutre si --av absent. */
  background: color-mix(in oklch, var(--av, var(--text-3)) 16%, var(--surface));
  color: color-mix(in oklch, var(--av, var(--text-3)) 78%, var(--text));
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; flex-shrink: 0; letter-spacing: 0.01em;
}

/* ───────────────────────── Home ───────────────────────── */
/* Home — full-page chatbot */
.home-fullchat { display: flex; flex-direction: column; }
.home-fullchat .home-chat-main { flex: 1; min-height: 0; display: flex; }
.home-fullchat .home-chat-main .chat-shell { flex: 1; height: 100%; box-shadow: var(--shadow-md); }

/* Home — full-page chatbot: 4 KPI blocks on top, chat + vigilance below */
.page-home.home-fullchat {
  padding: 0; max-width: none; height: 100vh;
  display: flex; flex-direction: column;
}
.home-fullchat .home-fc-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  padding: 18px 20px; flex-shrink: 0;
}
.home-fullchat .home-fc-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1fr 360px; gap: 0;
  border-top: 1px solid var(--border);
}
.home-fullchat .home-chat-main { min-width: 0; min-height: 0; display: flex; }
.home-fullchat .home-chat-main .chat-shell { flex: 1; height: 100%; box-shadow: none; border: none; border-radius: 0; }
.home-fullchat .home-vig-aside {
  border-left: 1px solid var(--border); background: var(--surface-2);
  overflow-y: auto; min-height: 0; padding: 16px;
}
.home-fullchat .home-vig-aside .vig-panel { background: var(--surface); }
@media (max-width: 1100px) {
  .page-home.home-fullchat { height: auto; min-height: 100%; }
  .home-fullchat .home-fc-kpis { grid-template-columns: 1fr 1fr; }
  .home-fullchat .home-fc-body { grid-template-columns: 1fr; }
  .home-fullchat .home-chat-main { min-height: 520px; }
  .home-fullchat .home-vig-aside { border-left: none; border-top: 1px solid var(--border); }
}

/* Points de vigilance */
.vig-panel { padding: 18px 20px; position: relative; }
.vig-locked .vig-head ~ * { filter: blur(6px); pointer-events: none; user-select: none; }
.apais-card.vig-locked { position: relative; }
.apais-card.vig-locked .panel-head, .apais-card.vig-locked .panel-head ~ * { filter: blur(6px); pointer-events: none; user-select: none; }
.apais-card.vig-locked .vig-gate { filter: none; }
.vig-locked .vig-head { filter: blur(5px); }
.vig-gate {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 11px; padding: 24px;
}
.vig-gate-ic {
  width: 50px; height: 50px; border-radius: 50%;
  /* flex-shrink: 0 — sans lui, quand le calque est plus haut que son
     conteneur (contenu verrouillé court), le cercle s'écrase en ellipse. */
  flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-dark); box-shadow: var(--shadow-md);
}
.vig-gate-title { font-size: 15px; font-weight: 600; }
.vig-gate-sub { font-size: 12.5px; color: var(--text-2); max-width: 320px; line-height: 1.5; }
.vig-compact { padding: 0; border: none; box-shadow: none; background: transparent; }
.vig-compact .vig-list { grid-template-columns: 1fr; }
.vig-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.vig-orb {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C12 7 17 12 22 12 17 12 12 17 12 22 12 17 7 12 2 12 7 12 12 7 12 2Z' transform='translate(-0.6 3.4) scale(0.8)'/%3E%3Cpath d='M12 2C12 7 17 12 22 12 17 12 12 17 12 22 12 17 7 12 2 12 7 12 12 7 12 2Z' transform='translate(12.6 0.4) scale(0.46)'/%3E%3Cpath d='M12 2C12 7 17 12 22 12 17 12 12 17 12 22 12 17 7 12 2 12 7 12 12 7 12 2Z' transform='translate(15.3 14.8) scale(0.3)'/%3E%3C/svg%3E") center / 60% no-repeat,
    radial-gradient(circle at 32% 30%, oklch(0.85 0.06 175), var(--accent));
  box-shadow: 0 4px 12px -4px oklch(0.62 0.07 175 / 0.5); position: relative;
}
.vig-orb-ic { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; background: var(--accent-soft); color: var(--accent-dark); display: inline-flex; align-items: center; justify-content: center; }
.vig-orb.pulsing::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent); animation: orbRipple 1.8s ease-out infinite;
}
.vig-title { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; display: flex; align-items: center; gap: 8px; }
.vig-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--warn-soft); color: oklch(0.42 0.10 60); font-size: 11.5px; font-weight: 700;
}
.vig-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.vig-empty { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); padding: 4px 0; }
.vig-empty svg { color: var(--accent-dark); }

.vig-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.vig-list-row {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity; grid-template-columns: none;
}
.vig-list-row .vig-card { flex: 0 0 calc(50% - 6px); max-width: calc(50% - 6px); scroll-snap-align: start; }
.vig-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; min-width: 0; }
.vig-row > * { min-width: 0; }
.vig-row .vig-list-row .vig-card { flex: 0 0 100%; max-width: 100%; }
.vig-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.vig-pager-info { font-size: 12px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vig-nav-btn { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-2); transition: all 0.13s ease; }
.vig-nav-btn:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-dark); }
.vig-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
@media (max-width: 980px) { .vig-row { grid-template-columns: 1fr; } }
.vig-chart { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.vig-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vig-chart-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.vig-chart-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.vig-chart .chart-svg { width: 100%; height: auto; }
.calls-evo { display: flex; flex-direction: column; gap: 14px; }
.calls-evo .panel-head { align-items: flex-start; }
.calls-evo-sub { display: block; font-size: 12px; color: var(--text-3); margin-top: 3px; }
.calls-evo-legend { display: flex; gap: 18px; margin: -4px 0 2px; }
.cel-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.cel-dot { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.calls-evo-stats { display: flex; flex-direction: column; gap: 16px; flex-shrink: 0; }
.calls-evo-stat { display: flex; flex-direction: column; gap: 1px; }
.ces-val { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.ces-lbl { font-size: 11px; color: var(--text-3); }
.calls-evo-svg { flex: 1; min-width: 0; width: 100%; height: auto; }

/* Page Réponses ciblées */
.resp-page { position: relative; }
.resp-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.resp-intro .vig-orb { width: 34px; height: 34px; flex-shrink: 0; }
.resp-intro-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.resp-intro-sub { font-size: 13px; color: var(--text-2); margin-top: 2px; max-width: 620px; line-height: 1.45; }
.resp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.resp-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.resp-card-head { display: flex; align-items: center; gap: 12px; }
.resp-card-id { flex: 1; min-width: 0; }
.resp-card-name { font-size: 15px; font-weight: 600; }
.resp-card-room { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.resp-qa-list { display: flex; flex-direction: column; gap: 12px; }
.resp-qa { padding-left: 12px; border-left: 2px solid var(--accent-soft); }
.resp-qa-q { font-size: 12.5px; font-weight: 600; color: var(--accent-dark); display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.resp-qa-a { font-size: 13px; line-height: 1.5; color: var(--text); }
.resp-qa-when { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.resp-card-foot { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }

/* Page Réponses ciblées — master / detail */
.resp2 { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; position: relative; }
.resp2-list { display: flex; flex-direction: column; gap: 4px; }
.resp2-list-head { display: flex; align-items: center; gap: 11px; padding: 4px 6px 12px; }
.resp2-list-head .vig-orb { width: 30px; height: 30px; flex-shrink: 0; }
.resp2-list-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.resp2-list-sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.resp2-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; text-align: left; width: 100%; transition: background 0.13s ease; }
.resp2-item:hover { background: var(--surface-2); }
.resp2-item.active { background: var(--accent-soft); }
.resp2-item-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.resp2-item-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resp2-item.active .resp2-item-name { color: var(--accent-dark); }
.resp2-item-room { font-size: 11px; color: var(--text-3); }
.resp2-item-count { flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.resp2-item.active .resp2-item-count { background: var(--accent); color: #fff; }
.resp2-detail { padding: 22px 24px; display: flex; flex-direction: column; gap: 20px; }
.resp2-detail-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.resp2-detail-id { flex: 1; min-width: 0; }
.resp2-detail-name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.resp2-detail-meta { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.resp2-detail-actions { display: flex; gap: 8px; flex-shrink: 0; }
.resp2-qa-list { display: flex; flex-direction: column; gap: 18px; }
.resp2-qa { display: flex; flex-direction: column; gap: 5px; }
.resp2-qa-q { font-size: 13px; font-weight: 600; color: var(--accent-dark); }
.resp2-qa-a { font-size: 14px; line-height: 1.55; color: var(--text); }
.resp2-qa-when { font-size: 11px; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; margin-top: 1px; }
.resp2-detail-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); display: flex; }
@media (max-width: 880px) { .resp2 { grid-template-columns: 1fr; } }
.resp2-embed { margin-top: 6px; }
.resp2-embed .resp2-detail { border: 1px solid var(--border); box-shadow: none; background: var(--surface-2); }
.resp2-embed .resp2-detail-head { border-bottom-color: var(--border-strong); }
.resp2-embed .resp2-list { max-height: 360px; overflow-y: auto; padding-right: 4px; }
.resp2-embed .resp2-qa-list { gap: 14px; }
.resp2-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--accent-dark); padding: 4px 0; }
.resp2-more:hover { color: var(--accent); }
.resp2-empty { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); padding: 12px; }
.resp2-empty svg { color: var(--accent-dark); }
.resp2-detail-empty { align-items: center; justify-content: center; text-align: center; gap: 12px; min-height: 320px; }
.resp2-done-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); display: inline-flex; align-items: center; justify-content: center; }
.resp2-done-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.resp2-done-sub { font-size: 13px; color: var(--text-2); max-width: 360px; line-height: 1.5; }
.calls-evo-row { display: flex; align-items: center; gap: 24px; }
.calls-evo-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; flex-shrink: 0; }
.calls-evo-seg button { padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--text-3); border-radius: 7px; transition: all 0.12s ease; }
.calls-evo-seg button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
@media (max-width: 880px) { .calls-evo-row { flex-direction: column; align-items: stretch; } .calls-evo-stats { flex-direction: row; justify-content: space-around; } }
@media (max-width: 880px) { .vig-split { grid-template-columns: 1fr; } }
.vig-list-row::-webkit-scrollbar { height: 8px; }
.vig-nav { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.vig-nav-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; transition: all 0.14s ease;
}
.vig-nav-btn:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-dark); }
.vig-nav-btn:active { transform: scale(0.94); }
.vig-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px;
  background: var(--surface); display: flex; flex-direction: column; gap: 11px;
  border-left: 3px solid var(--warn);
}
.vig-card.sev-high { border-left-color: var(--danger); background: color-mix(in oklch, var(--danger-soft) 30%, var(--surface)); }
.vig-card-top { display: flex; align-items: center; gap: 11px; }
.vig-card-id { flex: 1; min-width: 0; }
.vig-card-name { font-size: 14px; font-weight: 600; }
.vig-card-trend { font-size: 11.5px; color: var(--danger); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.vig-sev {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; flex-shrink: 0;
  background: var(--warn-soft); color: oklch(0.42 0.10 60);
}
.vig-sev.sev-high { background: var(--danger-soft); color: var(--danger); }
.vig-card-body { font-size: 12.5px; line-height: 1.5; }
.vig-reason { color: var(--text); }
.vig-lbl {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3); margin-right: 7px;
}
.vig-suggestion {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 9px; padding: 9px 11px;
  background: var(--accent-soft); color: var(--accent-dark); border-radius: var(--radius-sm); line-height: 1.45;
}
.vig-suggestion svg { flex-shrink: 0; margin-top: 1px; }
.vig-answers { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--border); }
.vig-answers-h {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3);
}
.vig-answers-h svg { color: var(--accent-dark); }
.vig-qa { padding: 7px 10px; background: var(--surface-2); border-radius: var(--radius-sm); margin-bottom: 6px; }
.vig-qa:last-child { margin-bottom: 0; }
.vig-qa-q { font-size: 11.5px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.vig-qa-a { font-size: 12px; line-height: 1.45; color: var(--text-2); }
.vig-card-sub2 { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.vig-by { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 9px; }
.vig-by-orb { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, oklch(0.85 0.06 175), var(--accent)); }
.vig-pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 9px; border-radius: 999px; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-dark);
}
.vig-card-more {
  align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--accent-dark);
  padding: 4px 0; margin-top: 2px;
}
.vig-card-more:hover { color: var(--accent); }
.vig-card-actions { display: flex; gap: 8px; }
.vig-done-btn { margin-left: auto; }
.vig-skel { display: flex; flex-direction: column; gap: 7px; }
.vig-skel span { height: 9px; border-radius: 4px; background: var(--surface-2); animation: vigPulse 1.3s ease-in-out infinite; }
.vig-skel span:nth-child(1) { width: 100%; }
.vig-skel span:nth-child(2) { width: 88%; }
.vig-skel span:nth-child(3) { width: 60%; }
@keyframes vigPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
.vig-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 12px; padding: 11px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  font-size: 13px; font-weight: 600; color: var(--accent-dark); background: var(--surface);
  transition: background 0.13s ease, border-color 0.13s ease;
}
.vig-more:hover { background: var(--accent-soft); border-color: var(--accent-soft); }

/* Configuration card buttons (resident profile) */
.cfg-card .panel-head { margin-bottom: 12px; }
.cfg-btns { display: flex; flex-direction: column; gap: 8px; }
.cfg-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 14px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); transition: border-color 0.14s ease, background 0.14s ease;
}
.cfg-btn:hover { border-color: var(--border-strong); background: var(--surface-2); }
.cfg-btn-ic {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-dark);
}
.cfg-btn-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cfg-btn-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.cfg-btn-sub { font-size: 11.5px; color: var(--text-3); }

/* Configuration modals */
.cfg-modal-backdrop {
  position: fixed; inset: 0; z-index: 320; background: rgba(20,20,18,0.5);
  display: flex; align-items: center; justify-content: center; padding: 32px;
  backdrop-filter: blur(2px);
}
.cfg-modal {
  width: min(620px, 95vw); max-height: 88vh; background: var(--surface);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  position: relative; /* ancre le voile d'attente de l'analyse */
  animation: popIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.cfg-modal-sm { width: min(500px, 95vw); }
.settings-tabs { padding: 0 24px; margin-bottom: 0; border-bottom: 1px solid var(--border); }
.settings-tabs .prof-tab { padding: 11px 14px; font-size: 13px; }
.pin-input { letter-spacing: 0.5em; font-size: 17px; text-align: center; font-weight: 600; }
.cfg-modal-lg { width: min(760px, 95vw); }
.q-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.q-chip {
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  transition: all 0.13s ease;
}
.q-chip:hover { border-color: var(--border-strong); }
.q-chip.active { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.q-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--surface-2); }
.q-block-h { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-dark); }
.q-block .cfg-input, .q-block .cfg-textarea { background: var(--surface); }
.cfg-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--accent-soft) 40%, var(--surface));
}
.cfg-step { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.cfg-modal-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-top: 4px; }
.cfg-head-right { display: flex; align-items: center; gap: 14px; }
.cfg-progress { display: flex; gap: 6px; }
.cfg-dot { width: 22px; height: 5px; border-radius: 999px; background: var(--border-strong); transition: background 0.16s ease; }
.cfg-dot.on { background: var(--accent); }
.cfg-modal-body { padding: 22px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.cfg-intro { font-size: 13px; line-height: 1.55; color: var(--text-2); margin: 0; }
.cfg-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cfg-field { display: flex; flex-direction: column; gap: 5px; }
.cfg-field-narrow { max-width: 160px; }
.cfg-label { font-size: 12px; font-weight: 600; color: var(--text); }
.cfg-hint { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
/* Réglages → Profil : les actions de compte chez Keycloak, côte à côte puis empilées. */
.compte-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.cfg-input, .cfg-textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 13.5px; color: var(--text); outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.cfg-input:focus, .cfg-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Champ obligatoire encore vide : contour ambré, pour le repérer à l'œil.
   Le focus reprend l'accent — pendant qu'on tape, plus besoin du signal. */
.cfg-input.manque, .cfg-textarea.manque { border-color: var(--warn); }
.q-choice.manque { border: 1px dashed color-mix(in oklch, var(--warn) 55%, transparent); border-radius: 12px; padding: 8px; }
.cfg-textarea { resize: vertical; line-height: 1.5; font-family: inherit; }
.cfg-modal-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface);
}
.cfg-actions-hint { font-size: 12px; color: var(--text-3); margin-left: auto; margin-right: 6px; }
/* Étape 2 : sections repliables. Le titre et le badge d'état restent
   toujours visibles ; après une extraction, les sections complètes arrivent
   repliées et seules celles qui attendent la psychologue sont dépliées. */
/* flex-shrink: 0 est OBLIGATOIRE : le corps de la modale est une colonne
   flex défilante, et l'overflow:hidden (coins arrondis) ramène la hauteur
   minimale de la carte à zéro — sans ce verrou, les cartes s'écrasent en
   traits fins au lieu de faire défiler la page. Constaté le 30/08/2026. */
.cfg-pli { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; flex-shrink: 0; }
.cfg-pli-tete { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: none; background: var(--surface); cursor: pointer; font: inherit; text-align: left; }
.cfg-pli-tete:hover { background: var(--bg); }
.cfg-pli-titre { margin: 0; font-size: 13.5px; font-weight: 700; flex: 1; }
.cfg-pli-etat { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.cfg-pli-etat.ok { color: var(--accent-dark); background: var(--accent-soft); }
.cfg-pli-etat.manque { color: var(--warn); background: var(--warn-soft); }
.cfg-pli-etat.neutre { color: var(--text-3); background: var(--bg); border: 1px solid var(--border); }
.cfg-pli-chev { color: var(--text-3); display: inline-flex; transition: transform 0.15s; }
.cfg-pli.ouvert .cfg-pli-chev { transform: rotate(90deg); }
.cfg-pli-corps { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--border); }

/* Clonage de voix : le bloc sous les puces, replié derrière « Créer une voix ». */
.q-chip-creer { display: inline-flex; align-items: center; gap: 6px; border-style: dashed; color: var(--accent-dark); font-weight: 600; cursor: pointer; }
.q-chip-creer:hover { border-color: var(--accent); background: var(--accent-soft); }
.cfg-clonage { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.cfg-clonage-depose { position: relative; border: 1px dashed var(--border-strong); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; transition: border-color 0.15s, background 0.15s; }
.cfg-clonage-fermer { position: absolute; top: 9px; right: 11px; display: inline-flex; border: none; background: none; cursor: pointer; color: var(--text-3); padding: 2px; }
.cfg-clonage-fermer:hover { color: var(--text); }
.cfg-clonage-depose.survol { border-color: var(--accent); background: var(--accent-soft); }
.cfg-clonage-titre { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.cfg-clonage-titre svg { color: var(--accent-dark); }
.cfg-clonage-depose .cfg-hint { max-width: 420px; }
.cfg-clonage-pret { border: 1px solid var(--border-strong); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cfg-clonage-pret .cfg-field { width: 100%; }
.cfg-clonage-pret .cfg-pj-rangee { justify-content: flex-start; }

/* Création d'une voix : le panneau à deux modes */
.cfg-creer { margin-top: 10px; position: relative; border: 1px solid var(--border-strong); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.cfg-creer .cfg-clonage { margin-top: 0; }
.cfg-creer-fermer { position: absolute; top: 9px; right: 11px; display: inline-flex; border: none; background: none; cursor: pointer; color: var(--text-3); padding: 2px; z-index: 1; }
.cfg-creer-fermer:hover { color: var(--text); }
.cfg-creer-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-right: 26px; }
.cfg-modes { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; background: var(--bg); }
.cfg-mode { border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.cfg-mode.on { background: var(--surface); color: var(--accent-dark); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.cfg-design { display: flex; flex-direction: column; gap: 10px; }
.cfg-label-suite { font-weight: 400; color: var(--text-3); }
.cfg-exemples { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-exemple { font: inherit; font-size: 11.5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text-2); cursor: pointer; }
.cfg-exemple:hover { border-color: var(--accent); color: var(--accent-dark); }
.cfg-exemple:disabled { opacity: .5; cursor: default; }
.cfg-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lien-discret { border: none; background: none; padding: 0; font: inherit; font-size: inherit; font-weight: 600; color: var(--accent-dark); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lien-discret:disabled { opacity: .5; cursor: default; }
.props { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .props { grid-template-columns: 1fr; } }
.prop { border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 9px; background: var(--bg); cursor: pointer; transition: border-color .15s, background .15s; }
.prop:hover { border-color: var(--border-strong); }
.prop.on { border-color: var(--accent); background: var(--accent-soft); }
.prop.attente { cursor: default; }
.prop-tete { display: flex; align-items: center; justify-content: space-between; }
.prop-nom { font-size: 12.5px; font-weight: 700; }
.prop-duree { font-size: 11px; color: var(--text-3); }
.prop-ecoute { display: flex; align-items: center; gap: 9px; }
.prop-play { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--accent-soft); color: var(--accent-dark); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; }
.prop-play:hover { background: var(--accent); color: #fff; }
.prop-play:disabled { opacity: .5; cursor: default; }
.prop.on .prop-play { background: var(--accent-dark); color: #fff; }
.onde { display: flex; align-items: center; gap: 2px; height: 26px; flex: 1; }
.onde i { display: block; width: 3px; border-radius: 2px; background: var(--border-strong); transition: background .12s; }
.onde i.lu { background: var(--accent-dark); }
.prop.on .onde i { background: var(--accent); opacity: .5; }
.prop.on .onde i.lu { background: var(--accent-dark); opacity: 1; }
.btn-regenerer { align-self: flex-start; margin-top: 2px; }

/* Copilot par champ : le bouton au bout du libellé, la proposition dessous */
.cfg-copilot { float: right; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--accent-dark); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 2px 9px 2px 7px; cursor: pointer; margin-top: -3px; }
.cfg-copilot:hover { border-color: var(--accent); background: var(--accent-soft); }
.cfg-copilot:disabled { cursor: default; }
.cfg-copilot.en-cours { color: var(--text-3); }
.cfg-copilot.en-cours svg { animation: cfg-copilot-tourne 1s linear infinite; }
@keyframes cfg-copilot-tourne { to { transform: rotate(360deg); } }
.cfg-proposition { margin-top: 8px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.cfg-proposition-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cfg-proposition-titre { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--accent-dark); }
.cfg-proposition-aide { font-size: 11.5px; color: var(--text-2); }
.cfg-proposition .cfg-textarea { width: 100%; box-sizing: border-box; background: var(--surface); }
.cfg-proposition-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfg-proposition-actions .lien-discret { margin-left: auto; font-size: 12px; }
.cfg-reformule { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); }
.cfg-reformule svg { color: var(--accent-dark); }
.cfg-reformule button { border: none; background: none; padding: 0; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--accent-dark); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.prop.attente .onde i { animation: onde-attente 1.1s ease-in-out infinite; }
@keyframes onde-attente { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.prop-choix { font-size: 11.5px; font-weight: 600; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; }
.prop.on .prop-choix { color: var(--accent-dark); }
.prop-radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: inline-block; box-sizing: border-box; }
.prop.on .prop-radio { border-color: var(--accent-dark); background: var(--accent-dark); box-shadow: inset 0 0 0 2.5px var(--accent-soft); }
/* Rappel des champs manquants : il doit accrocher l'œil, sinon on cherche
   pourquoi le bouton reste grisé. La couleur suffit — ni fond ni bordure,
   qui prenaient toute la largeur de la barre. Ambre et non rouge : rien
   n'est en erreur, il reste seulement des choses à remplir. */
.cfg-actions-manque {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--warn);
  margin-left: auto; margin-right: 6px;
}
.cfg-actions-manque svg { flex-shrink: 0; }
.cfg-actions-manque + .cfg-draft-btn { margin-left: 0; }
.cfg-draft-btn { margin-left: auto; }
.cfg-actions-hint + .cfg-draft-btn { margin-left: 0; }
.draft-banner {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 14px 16px; margin-bottom: 16px; border-radius: var(--radius);
  border: 1px dashed var(--accent); background: var(--accent-soft);
  transition: background 0.14s ease;
}
.draft-banner:hover { background: color-mix(in oklch, var(--accent-soft) 70%, var(--accent) 30%); }
.draft-ic { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; background: var(--surface); color: var(--accent-dark); display: inline-flex; align-items: center; justify-content: center; }
.draft-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.draft-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.draft-sub { font-size: 12px; color: var(--accent-dark); }
.draft-resume { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent-dark); flex-shrink: 0; }
.draft-del { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); }
.draft-del:hover { background: var(--surface); color: var(--danger); }

/* Residents toolbar (add resident) */
.res-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.res-toolbar-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.res-toolbar-sub { font-size: 13px; color: var(--text-3); margin: 3px 0 0; }

/* Add-resident recap + done */
.cfg-recap { display: flex; flex-direction: column; gap: 0; }
.cfg-recap-row { display: flex; gap: 14px; padding: 12px 0; border-top: 1px dashed var(--border); font-size: 13.5px; }
.cfg-recap-row:first-child { border-top: none; }
.cfg-recap-row .k { flex-shrink: 0; width: 110px; color: var(--text-3); font-weight: 600; }
.cfg-recap-row .v { color: var(--text); line-height: 1.5; }
.cfg-recap-note {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12px; color: var(--accent-dark); background: var(--accent-soft);
  padding: 11px 13px; border-radius: var(--radius-sm);
}
.cfg-done { padding: 40px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.cfg-done-ic {
  width: 64px; height: 64px; border-radius: 50%; margin-bottom: 4px;
  background: var(--online-soft); color: oklch(0.42 0.13 150);
  display: flex; align-items: center; justify-content: center;
}
.cfg-done-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.cfg-done-sub { font-size: 13.5px; color: var(--text-2); line-height: 1.5; max-width: 320px; margin-bottom: 8px; }

/* Appels récents page */
.calls-filter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 13px; margin-bottom: 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
}
.calls-filter-field { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.calls-filter-field input {
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px;
  font-size: 12.5px; color: var(--text); background: var(--surface); outline: none; font-family: inherit;
}
.calls-filter-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.calls-filter-clear {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
  color: var(--text-3); padding: 5px 8px; border-radius: 8px;
}
.calls-filter-clear:hover { background: var(--surface); color: var(--danger); }
.calls-filter-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-3); }
.recentpage-list { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin: 0 auto; }
.recentpage-item {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
  text-align: left; width: 100%; cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.recentpage-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.recentpage-body { flex: 1; min-width: 0; }
.recentpage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.recentpage-name { font-size: 15px; font-weight: 600; }
.recentpage-when { font-size: 12px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.recentpage-flow { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.recentpage-sum { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.recentpage-sum.locked { filter: blur(5px); user-select: none; }
.is-unlocked .recentpage-sum.locked { filter: none; user-select: auto; }
.recentpage-item .res-open { margin-top: 4px; }
.chat-topbanner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--accent-soft) 30%, var(--surface));
  flex-shrink: 0; position: relative; z-index: 7;
}
.chat-topbanner .mini-stat { box-shadow: none; background: var(--surface); }

/* Home — compact ribbon + full-height chat */
.home-compact { display: flex; flex-direction: column; gap: 14px; }
.home-compact .home-kpi-ribbon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; flex-shrink: 0; }
.mini-stat { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.mini-stat-ic {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-dark);
  display: inline-flex; align-items: center; justify-content: center;
}
.mini-stat-body { min-width: 0; }
.mini-stat-val { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.mini-stat-label { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-stat-foot { margin-left: auto; font-size: 11.5px; white-space: nowrap; }
.home-chat-main { flex: 1; min-height: 0; display: flex; }
.home-chat-main .chat-shell { flex: 1; height: 100%; box-shadow: var(--shadow-md); }

/* Home — chatbot-forward layout */
.home-chatfwd { display: flex; flex-direction: column; gap: 14px; }
.home-kpi-ribbon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; flex-shrink: 0; }
.home-kpi-ribbon .stat-tile { padding: 14px 18px; }
.home-kpi-ribbon .stat-val { font-size: 26px; }
.home-chat-main { flex: 1; min-height: 0; display: flex; }
.home-chat-main .chat-shell { flex: 1; height: 100%; box-shadow: var(--shadow-md); }

/* Home — chatbot hero layout */
.page-home { height: calc(100vh - 64px - 56px); }
.home-hero { display: grid; grid-template-columns: 1fr 1.7fr; gap: 16px; height: 100%; align-items: stretch; }
.home-hero > * { min-width: 0; min-height: 0; }
.home-hero-rail { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.home-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex-shrink: 0; }
.home-kpis .stat-tile { padding: 15px 16px; }
.home-kpis .stat-val { font-size: 25px; }
.home-recent { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.home-recent .recent-calls { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.home-hero-chat { display: flex; min-height: 0; }
.home-hero-chat .chat-shell { flex: 1; height: 100%; box-shadow: var(--shadow-md); }

.home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-tile {
  padding: 18px 20px; display: flex; flex-direction: column; gap: 6px;
}
.stat-ic {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent-dark);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.stat-val { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.stat-label { font-size: 13px; color: var(--text-2); }
.stat-foot { font-size: 12px; color: var(--text-3); margin-top: 2px; display: flex; align-items: center; gap: 6px; }

.home-cols { display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px; margin-top: 16px; align-items: start; }
.home-cols > * { min-width: 0; }
.home-assistant { margin-top: 16px; height: 620px; }
.home-assistant .chat-shell { height: 100%; }
.recent-calls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Calls accepted/refused chart legend */
.calls-chart-legend { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; }
.calls-chart-legend .ccl-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.calls-chart-legend .ccl-item .dot { width: 11px; height: 11px; border-radius: 3px; }
.calls-chart-legend .ccl-item b { color: var(--text); font-weight: 700; }
.calls-chart-legend .ccl-rate {
  margin-left: auto; font-size: 12px; font-weight: 600;
  color: var(--accent-dark); background: var(--accent-soft);
  padding: 5px 11px; border-radius: 999px;
}
@media (max-width: 920px) { .recent-calls-grid { grid-template-columns: 1fr; } }

.panel { padding: 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-head h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
/* Titre + précision de périmètre côte à côte, le lien restant collé à droite */
.panel-head-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.link-btn { font-size: 12.5px; font-weight: 600; color: var(--accent-dark); display: inline-flex; align-items: center; gap: 3px; }
.link-btn:hover { color: var(--accent); }

/* activity feed */
.feed { display: flex; flex-direction: column; }
.feed-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-top: 1px dashed var(--border);
  text-align: left; width: 100%; transition: background 0.12s ease;
  border-radius: 8px;
}
.feed-row:first-child { border-top: none; }
.feed-row:hover { background: var(--surface-2); }
.feed-dot {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
  background: color-mix(in oklch, var(--mc) 32%, var(--surface));
}
.feed-body { flex: 1; min-width: 0; }
.feed-name { font-size: 13.5px; font-weight: 600; }
.feed-note { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-when { font-size: 11.5px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }

/* derniers appels (home) */
.recent-calls { display: flex; flex-direction: column; }
.recent-call {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 4px; border-top: 1px dashed var(--border);
  text-align: left; width: 100%; border-radius: 8px;
  transition: background 0.12s ease;
}
/* 1ère notif : bouton « Déverrouiller » superposé sur le résumé flouté */
.recent-call-unlock {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
  pointer-events: none; /* le clic est capté par le bouton parent */
}
.recent-call-lead:hover .recent-call-unlock { filter: brightness(1.05); }
.recent-call:first-child { border-top: none; }
.recent-call:hover { background: var(--surface-2); }
.recent-call-body { flex: 1; min-width: 0; }
.recent-call-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 3px; flex-wrap: wrap; }
.recent-call-name { font-size: 13.5px; font-weight: 600; }
.recent-call-when { font-size: 11.5px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.recent-call-sum.locked { filter: blur(5px); user-select: none; }
.recent-call-sum {
  font-size: 12.5px; line-height: 1.45; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ───────────────────────── Residents list ───────────────────────── */
.list-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.seg {
  display: inline-flex; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 3px;
}
.seg button {
  padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--text-3);
  border-radius: 7px; transition: all 0.12s ease;
}
.seg button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.chip-filter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  transition: all 0.13s ease;
}
.chip-filter:hover { border-color: var(--border-strong); }
.chip-filter.active { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-soft); }

.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

.res-card {
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
  text-align: left; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
  cursor: pointer;
}
.res-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.res-card:active { transform: translateY(1px); }
.res-top { display: flex; align-items: flex-start; gap: 13px; }
.res-avatar { width: 48px; height: 48px; font-size: 15px; position: relative; }
.res-avatar .ring {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--mc); opacity: 0.7;
}
.res-id { flex: 1; min-width: 0; }
.res-name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.res-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.res-cond { font-size: 12px; color: var(--text-2); margin-top: 8px; line-height: 1.4; }
.res-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 13px; border-top: 1px dashed var(--border); }
.res-foot-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.res-last { font-size: 11.5px; color: var(--text-3); }
.res-summary {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.45; color: var(--text-2);
}
.res-open {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.14s ease; border: 1px solid var(--border);
}
.res-card:hover .res-open { background: var(--accent); color: #fff; border-color: var(--accent); }

/* sparkline mini */
.spark { display: block; }

/* table variant */
.res-table { width: 100%; border-collapse: collapse; }
.res-table thead th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-3); padding: 0 16px 12px; border-bottom: 1px solid var(--border);
}
.res-table tbody tr { cursor: pointer; transition: background 0.12s ease; }
.res-table tbody tr:hover { background: var(--surface-2); }
.res-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.res-table .td-name { font-weight: 600; }
/* Colonne « Dernier résumé » : une phrase issue de l'appel, donc du contenu
   de conversation — floutée tant que le code n'est pas saisi. Largeur bornée
   pour que la colonne ne pousse pas le reste du tableau. */
.res-table .td-resume { max-width: 300px; min-width: 200px; }
.res-tsum-when {
  display: block; margin-bottom: 3px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-3);
}
.res-tsum {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 13.5px; line-height: 1.4; color: var(--text-2);
}
.res-tsum.locked { filter: blur(5px); user-select: none; cursor: pointer; }
.res-tsum-unlock { margin-top: 6px; }
.res-tsum-vide { font-size: 12.5px; color: var(--text-3); font-style: italic; }
.layout-list .res-grid { grid-template-columns: 1fr; }

/* Logo Livana en tête de l'accueil — mobile uniquement (voir le bloc 720 px) */
.home-mlogo { display: none; }

/* Liste des résidents en version mobile : une ligne empilée par résident,
   pour lire toutes les données sans défilement horizontal. Le tableau à
   6 colonnes reste la version large (bascule à 720 px, plus bas). */
.res-mlist { display: none; }
.res-mrow {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px;
}
.res-mrow-head { display: flex; align-items: center; gap: 11px; }
.res-mrow-id { flex: 1; min-width: 0; }
.res-mrow-name {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 14.5px; font-weight: 600; color: var(--text);
}
.res-mrow-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.res-mrow-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.res-mstat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px; border-radius: 10px; background: var(--surface-2);
}
.res-mstat-lbl {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-3);
}
.res-mstat-val { font-size: 15px; font-weight: 600; color: var(--text); }

/* Grille des cartes résident sur l'accueil : trois par ligne sur ordinateur
   quelle que soit la largeur de l'écran, deux sur tablette, une sur téléphone.
   En flex plutôt qu'en grille : une ligne incomplète — deux résidents suivis,
   ou une carte de moins — reste alors CENTRÉE au lieu de se coller à gauche
   en laissant un vide. Chaque carte garde la largeur qu'elle aurait eue dans
   une ligne pleine, elle ne s'étire pas pour combler.
   Contrairement à .res-mlist, cette grille reste visible sur desktop. */
.home-res-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.home-res-grid > * { flex: 0 1 calc((100% - 24px) / 3); min-width: 0; }
@media (max-width: 1024px) { .home-res-grid > * { flex-basis: calc((100% - 12px) / 2); } }
@media (max-width: 720px) { .home-res-grid > * { flex-basis: 100%; } }
/* Variante D à l'essai : toute la carte est teintée par l'humeur de fin du
   dernier appel (--mc, posé par CarteResident). Sans humeur connue (aucun
   résumé, ou analyse en cours), la teinte retombe sur le gris de bordure,
   donc sur une carte neutre. */
.home-res-grid .res-mrow {
  background: color-mix(in oklch, var(--mc, var(--border)) 16%, var(--surface));
  border-color: color-mix(in oklch, var(--mc, var(--border)) 40%, var(--border));
  box-shadow: var(--shadow-sm);
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
/* Légende des teintes, entre l'en-tête du panneau et la grille. Discrète :
   c'est une clé de lecture, pas un contenu. Réglée pour tenir sur une seule
   ligne, avec un repli en passage à la ligne sous ~400 px. */
.home-res-legende {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 13px;
  margin: -4px 0 14px;
}
.home-res-legende .lg-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--text-3); white-space: nowrap;
}
/* Échantillon plus soutenu que les pastilles des vignettes (32 %) et que le
   fond des cartes (16 %) : sur 12 px de diamètre, il faut de la densité pour
   que la couleur se lise. Il désigne l'humeur, il n'imite pas une surface. */
.home-res-legende .lg-pastille {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: color-mix(in oklch, var(--mc) 55%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--mc) 70%, var(--border));
}
/* Indicateurs en blanc : ils se détachent du fond teinté. */
.home-res-grid .res-mstat { background: var(--surface); }
/* Même logique pour la pastille « Fiche résident » : son vert d'origine se
   perdait sur les cartes teintées (surtout les vertes). Fond blanc + contour
   sauge, elle reste lisible sur les cinq humeurs. Au survol elle se remplit
   de sauge, comme partout ailleurs. */
.home-res-grid .res-open-wrap {
  background: var(--surface);
  border: 1px solid color-mix(in oklch, var(--accent) 35%, var(--border));
  color: var(--accent-dark);
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.home-res-grid .res-mrow:hover .res-open-wrap {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.home-res-grid .res-mstat-val { font-size: 14px; }
/* Sur l'accueil le résumé passe en noir, pour prendre le pas sur les chiffres,
   mais revient à sa taille d'origine : la carte porte déjà la teinte d'humeur
   et la ligne début → fin, un texte plus gros la chargeait. La page Résidents,
   elle, garde les 13,5 px de .res-mrow-resume-txt. */
.home-res-grid .res-mrow-resume-txt { color: var(--text); font-size: 12.5px; }
/* Léger cercle autour de la pastille : sur une carte teintée, la pastille et
   le fond sont deux tons clairs voisins et le contour se perdait. Le filet
   reprend la couleur d'identité du résident (--av) pour les initiales, celle
   de l'humeur (--mc) pour la frimousse — toujours la teinte de la pastille
   qu'il entoure, jamais un gris rapporté. */
.home-res-grid .avatar {
  border: 1px solid color-mix(in oklch, var(--av, var(--text-3)) 30%, var(--border));
}
.home-res-grid .avatar.avatar-emoji {
  border-color: color-mix(in oklch, var(--mc) 45%, var(--border));
}
/* Au survol la carte se décolle légèrement : l'ombre s'accentue et la carte
   monte d'un pixel, pour signaler qu'elle est cliquable. La bordure passe à
   la couleur pleine de l'humeur, dans la continuité de la teinte du fond. */
.home-res-grid .res-mrow:hover {
  border-color: var(--mc, var(--accent));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
/* ── Vue rapide : vignettes allégées (à l'essai) ───────────────────────
   Ni indicateurs ni résumé : la seule information portée est l'humeur de fin
   du dernier appel. Frimousse en grand et fond de vignette à la même teinte,
   même dosage que les cartes (14 % / 32 %) pour que les deux blocs de
   l'accueil restent cohérents. */
/* En flex plutôt qu'en grille, pour la même raison que .home-res-grid : une
   grille auto-fill crée autant de colonnes que la largeur le permet et laisse
   des cases vides à droite sur grand écran. Ici les vignettes s'étirent
   jusqu'à 220 px puis la ligne se centre. */
.home-vign-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.home-vign-grid > * { flex: 1 1 150px; max-width: 220px; min-width: 0; }
.home-vign {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 12px 13px; border-radius: 14px; text-align: center;
  background: color-mix(in oklch, var(--mc, var(--border)) 14%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--mc, var(--border)) 32%, var(--border));
  box-shadow: var(--shadow-sm);
  transition: border-color 0.13s ease, transform 0.13s ease, box-shadow 0.13s ease;
}
.home-vign:hover {
  border-color: var(--mc, var(--accent));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.home-vign-nom { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
/* Trajet écrit « Agité → Apaisé », chaque humeur dans sa propre couleur —
   posée en style en ligne par le composant, seule façon de teinter deux mots
   d'une même ligne avec deux variables différentes.
   Deux libellés longs (« Mélancolique → Mélancolique ») dépassaient de la
   vignette : c'est le second qui se tronque, le premier restant entier
   puisqu'on lit le trajet de gauche à droite. */
.home-vign-traj {
  display: flex; align-items: baseline; justify-content: center;
  max-width: 100%; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; line-height: 1.35;
  color: color-mix(in oklch, var(--mc, var(--text-3)) 70%, var(--text));
}
.home-vign-traj > span:first-child { flex-shrink: 0; }
.home-vign-traj > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.home-vign-traj .sep { color: var(--text-3); font-weight: 400; margin: 0 3px; flex-shrink: 0; }
.home-vign-quand { font-size: 10.5px; color: var(--text-3); }
/* Les remontées nouvelles des fils, sous la date : deux petites pastilles. */
.home-vign-comptes { display: flex; justify-content: center; gap: 6px; }
/* Les mêmes pastilles à côté d'un nom (page Résidents, tableau et liste mobile). */
.fl-comptes { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; margin-left: 2px; }
.res-mrow-name .fl-comptes { margin-left: 6px; }
.home-vign-compte, .fl-compte { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--ton-doux); color: var(--ton); border: 1px solid var(--ton-bord); }
.home-vign-compte i, .fl-compte i { width: 6px; height: 6px; border-radius: 50%; background: var(--ton); }
.home-vign-compte.rouge, .fl-compte.rouge { --ton: oklch(0.52 0.13 25); --ton-doux: oklch(0.96 0.025 25); --ton-bord: oklch(0.86 0.06 25); }
.home-vign-compte.vert, .fl-compte.vert { --ton: oklch(0.46 0.10 155); --ton-doux: oklch(0.96 0.03 150); --ton-bord: oklch(0.85 0.06 150); }
.home-vign-rien { font-size: 11px; font-weight: 600; color: var(--text-3); padding: 2px 7px; border: 1px dashed var(--border-strong); border-radius: 999px; }
.home-vign-rien.attente { visibility: hidden; }
/* Pastille d'accès à la fiche : fond blanc, seule valeur lisible sur les cinq
   teintes d'humeur. Elle se remplit de sauge au survol de la vignette entière,
   celle-ci étant cliquable dans son ensemble. */
.home-vign-fiche {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600;
  background: var(--surface); color: var(--accent-dark);
  border: 1px solid color-mix(in oklch, var(--accent) 35%, var(--border));
  transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}
.home-vign:hover .home-vign-fiche {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* Sortie vers la liste complète en pied de section : réservée au téléphone,
   où le lien de l'en-tête est trop loin une fois les cartes empilées. */
.home-res-all { display: none; }
@media (max-width: 720px) { .home-res-all { display: flex; } }

/* Résumé du dernier appel dans la vignette — contenu conversationnel,
   flouté tant que le code n'a pas été saisi (comme .recent-call-sum).
   Le bouton de déverrouillage n'est rendu que sur la première carte. */
.res-mrow-resume {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
/* Pastille d'humeur : la frimousse remplace les initiales, sur un fond teinté
   par l'humeur — même formule que .feed-dot des derniers appels (vert pour
   l'apaisement, rouge pour l'agitation…). L'anneau devient superflu.
   32 % de teinte : en dessous, les humeurs pâles (inquiétude) se noient sur
   le beige des cartes. Même dosage sur .feed-dot et .mood-pill.tinted. */
.avatar.avatar-emoji {
  background: color-mix(in oklch, var(--mc) 32%, var(--surface));
  letter-spacing: 0;
}
.avatar.avatar-emoji .ring { display: none; }
.res-mrow-resume-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Humeur début → fin, entre la date et le résumé. Pastilles resserrées : la
   vignette est bien plus étroite que le tiroir de transcription. */
/* Une respiration de part et d'autre des pastilles, identique au-dessus et en
   dessous : la ligne d'humeur se détache ainsi de la date comme du résumé. */
.res-mrow-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.res-mrow-flow .mood-pill { font-size: 11px; padding: 3px 8px 3px 7px; gap: 5px; }
.res-mrow-flow .mood-pill .e { font-size: 12px; }
.res-mrow-flow .call-arrow { display: inline-flex; color: var(--text-3); }
.res-mrow-resume-lbl {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-3);
}
/* Déverrouillage : span cliquable (et non <button>, la carte en est déjà un) */
.res-mrow-unlock {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  transition: background 0.14s ease;
}
.res-mrow-unlock:hover { background: var(--accent-dark); }
.res-mrow-resume-txt {
  font-size: 13.5px; line-height: 1.45; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.res-mrow-resume-txt.locked { filter: blur(5px); user-select: none; }
.res-mrow-resume-vide { font-size: 12.5px; color: var(--text-3); font-style: italic; }

/* density */
.density-compact .res-card { padding: 14px; gap: 10px; }
.density-compact .page { padding: 20px; }
.density-compact .panel { padding: 16px; }

/* card style variants */
.cardstyle-photo .res-avatar { width: 52px; height: 52px; }
.cardstyle-minimal .res-avatar { display: none; }
.cardstyle-minimal .res-top { gap: 0; }

/* ───────────────────────── Resident profile ───────────────────────── */
.prof-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.prof-head-stats { align-items: center; }
.prof-head-kpis { margin-left: auto; display: flex; gap: 10px; flex-shrink: 0; }
.prof-hk {
  text-align: center; padding: 11px 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); min-width: 92px;
}
.prof-hk-val { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.prof-hk-lbl { font-size: 11px; color: var(--text-3); font-weight: 600; letter-spacing: 0.02em; margin-top: 4px; white-space: nowrap; }
@media (max-width: 720px) { .prof-head-kpis { display: none; } }
.prof-back {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all 0.14s ease;
}
.prof-back:hover { background: var(--surface-2); color: var(--text); }
.prof-avatar { width: 64px; height: 64px; font-size: 20px; position: relative; }
/* Léger cercle autour des initiales, comme sur les cartes de l'accueil : il
   reprend la couleur d'identité du résident (--av), très dilué, pour détacher
   la pastille du fond de l'en-tête. */
.avatar.prof-avatar { border: 1px solid color-mix(in oklch, var(--av, var(--text-3)) 30%, var(--border)); }
.prof-id { flex: 1; min-width: 0; }
.prof-name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prof-sub { font-size: 13.5px; color: var(--text-2); margin-top: 4px; }
.prof-cond { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; color: var(--text-2); background: var(--surface-2); padding: 5px 11px; border-radius: 999px; }
.prof-actions { display: flex; gap: 8px; flex-shrink: 0; }

.prof-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }

/* 3-tab profile layout */
.page-profile { display: flex; flex-direction: column; }
/* Défilement horizontal à TOUTES les largeurs, pas seulement sur mobile :
   entre 720 et 1024 px, les cinq onglets ne tiennent pas et le dernier
   (« Configuration des appels ») sortait de l'écran sans aucun moyen de
   l'atteindre. Sur grand écran où tout tient, `auto` n'affiche rien et ne
   change rien. La barre de défilement est masquée : le débordement se voit
   déjà à l'onglet coupé au bord. */
.prof-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; flex-wrap: nowrap;
}
.prof-tabs::-webkit-scrollbar { display: none; }
.prof-tab {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap;
  padding: 11px 16px; font-size: 13.5px; font-weight: 600; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.14s ease, border-color 0.14s ease;
}
.prof-tab:hover { color: var(--text); }
.prof-tab.active { color: var(--accent-dark); border-bottom-color: var(--accent); }
.prof-tab svg { opacity: 0.85; }
.prof-tabpane { min-height: 0; }
.prof-pane-chat { height: calc(100vh - 64px - 56px - 110px); min-height: 480px; display: flex; }
.prof-pane-chat .chat-shell { flex: 1; height: 100%; box-shadow: var(--shadow-md); }
.prof-pane-chat .chat-embed { height: 100% !important; min-height: 0 !important; position: static !important; }
.kpi-row-wide { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.call-list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cfg-card-desc { font-size: 13px; line-height: 1.55; color: var(--text-2); margin: 0 0 14px; }

/* Profile tout-en-chat layout */
.page-fullchat { display: flex; flex-direction: column; height: calc(100vh - 64px); }
.page-fullchat .fullchat-wrap { flex: 1; min-height: 0; display: flex; margin-top: 4px; }
.page-fullchat .fullchat-wrap .chat-shell { flex: 1; height: 100%; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.fullchat-kpis {
  display: flex; align-items: center; gap: 22px;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--accent-soft) 30%, var(--surface));
}
.fc-kpi { display: flex; flex-direction: column; gap: 1px; }
.fc-kpi-val { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.fc-kpi-lbl { font-size: 11.5px; color: var(--text-2); }
.fc-kpi-action {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
  transition: all 0.14s ease;
}
.fc-kpi-action:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-dark); }

.suivi-locked-wrap { position: relative; }
.suivi-locked-block { position: relative; margin-bottom: 16px; }
.suivi-locked-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.suivi-locked-grid .suivi-locked-block { margin-bottom: 0; }
@media (max-width: 900px) { .suivi-locked-grid { grid-template-columns: 1fr; } }
.suivi-locked-block.vig-locked .suivi-locked-content { filter: blur(6px); pointer-events: none; user-select: none; }
.suivi-locked-block .vig-gate { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 11px; padding: 24px; }
.suivi-locked-wrap.vig-locked .suivi-locked-content { filter: blur(6px); pointer-events: none; user-select: none; }
.suivi-locked-content { display: flex; flex-direction: column; gap: 16px; }

/* Suivi ciblé (directives) */
.dir-wrap { display: flex; flex-direction: column; gap: 16px; }
.dir-intro { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; }
.dir-intro-ic {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-dark);
  display: inline-flex; align-items: center; justify-content: center;
}
.dir-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.dir-list { display: flex; flex-direction: column; gap: 10px; }
.dir-item { display: flex; align-items: flex-start; gap: 10px; }
.dir-num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; margin-top: 7px;
  background: var(--accent-soft); color: var(--accent-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.dir-input {
  flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 13px; color: var(--text); outline: none; resize: vertical;
  line-height: 1.45; font-family: inherit; transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.dir-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dir-del {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; margin-top: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); transition: all 0.13s ease;
}
.dir-del:hover { background: var(--danger-soft); color: var(--danger); }
.dir-add { display: flex; gap: 8px; align-items: center; margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--border); }
.dir-add-input {
  flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 13px; color: var(--text); outline: none;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.dir-add-input:focus { border-color: var(--accent); background: var(--surface); }
.dir-note {
  display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px;
  background: var(--accent-soft); color: var(--accent-dark); border-radius: var(--radius);
  font-size: 12px; line-height: 1.45;
}
.dir-note svg { flex-shrink: 0; margin-top: 1px; }
.suivi-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.suivi-qa { padding: 13px 15px; background: var(--surface-2); border-radius: var(--radius); }
.suivi-qa-q { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.suivi-qa-q svg { color: var(--accent-dark); flex-shrink: 0; }
.suivi-qa-a { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.suivi-qa-when { font-size: 11px; color: var(--text-3); margin-top: 7px; }
@media (max-width: 720px) { .suivi-answers { grid-template-columns: 1fr; } }
.suivi-q-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.suivi-q-list li { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.suivi-q-list li::marker { color: var(--accent-dark); font-weight: 700; }
.suivi-q-sub { margin: 8px 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.suivi-q-list-cols { columns: 2; column-gap: 28px; }
.synthese-text { font-size: 13.5px; line-height: 1.6; color: var(--text); margin: 0; text-wrap: pretty; }
.apais-intro { font-size: 12px; color: var(--text-2); margin: 0 0 12px; line-height: 1.45; }
.apais-intro strong { font-weight: 600; }
/* Bouton « actualiser les suggestions » de la carte d'apaisement */
.apais-refresh {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-3);
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.apais-refresh:hover:not(:disabled) { color: var(--accent-dark); border-color: var(--accent-soft); background: var(--accent-soft); }
.apais-refresh:disabled { opacity: 0.5; cursor: default; }
.apais-refresh:disabled svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.apais-list { display: flex; flex-direction: column; gap: 8px; }
/* Suggestions d'apaisement : ce sont des gestes à poser au chevet du résident,
   il faut les repérer sans les chercher. Fond sauge plus soutenu qu'un simple
   accent-soft et filet vertical à gauche pour accrocher l'œil en début de
   ligne — le texte, lui, garde sa graisse normale. */
.apais-item {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; line-height: 1.4; color: var(--text);
  padding: 10px 13px; border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--accent) 14%, var(--surface));
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-sm);
}
.apais-tx { flex: 1; min-width: 0; }
/* Numéro d'ordre. Remplace l'ancienne coche verte, qui laissait croire que la
   suggestion avait déjà été appliquée alors que rien n'a encore été fait. */
.apais-num {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; align-self: flex-start; margin-top: 1px;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.apais-copier {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font-size: 12px; font-weight: 600; font-family: inherit;
}
.apais-copier:hover:not(:disabled) { color: var(--accent-dark); border-color: var(--accent-soft); background: var(--accent-soft); }
.apais-copier:disabled { opacity: 0.5; cursor: default; }

/* ── Onglet « Dossier » de la fiche résident ───────────────────────────── */
/* Deux boîtes côte à côte (22/09/2026) : le carnet de notes, et les éléments versés depuis les fils. */
.doss-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1080px) { .doss-deux { grid-template-columns: 1fr; } }
.doss-verse { border-top: 3px solid color-mix(in oklch, var(--accent) 70%, var(--border)); }
.doss-verse .doss-chapeau-ic { background: var(--accent-soft); color: var(--accent-dark); transform: rotate(-45deg); }
.doss-ong { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 2px 0 14px; }
.doss-ong-b { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-3); background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; margin-bottom: -1px; cursor: pointer; }
.doss-ong-b.rouge { --ton: oklch(0.52 0.13 25); } .doss-ong-b.vert { --ton: oklch(0.46 0.10 155); }
.doss-ong-b i { width: 8px; height: 8px; border-radius: 50%; background: var(--ton); }
.doss-ong-b b { font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--text-2); border-radius: 999px; padding: 1px 7px; }
.doss-ong-b.on { color: var(--text); border-bottom-color: var(--ton); }
.doss-rem { display: flex; flex-direction: column; }
.doss-rem .doss-entree-head { margin-bottom: 5px; }
.doss-rem-lien { padding: 0; font-size: 11.5px; }
.doss-rem-titre { font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.doss-rem-cite { display: block; margin-top: 3px; font-size: 13px; font-style: italic; color: var(--text-2); line-height: 1.5; }
.doss-rem-com { margin: 7px 0 0; padding: 6px 9px; border-radius: 8px; background: var(--surface); font-size: 12.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.doss-rem-edit { margin-top: 7px; }
.doss-rem-ajouter { align-self: flex-start; margin-top: 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-3); background: none; border: 1px dashed var(--border-strong); border-radius: 8px; padding: 4px 9px; cursor: pointer; }
.doss-rem-ajouter:hover { color: var(--text); border-color: var(--text-3); }
.doss-rem-pied { display: block; margin-top: 7px; font-size: 11.5px; color: var(--text-3); }
.doss-prive { border-top: 3px solid color-mix(in oklch, var(--c-violet) 55%, var(--border)); }
.doss-chapeau { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.doss-chapeau .panel-head { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: 8px; }
.doss-chapeau-ic {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.doss-prive .doss-chapeau-ic {
  background: color-mix(in oklch, var(--c-violet) 15%, var(--surface));
  color: color-mix(in oklch, var(--c-violet) 70%, var(--text));
}
.doss-prive .doss-entree { background: color-mix(in oklch, var(--c-violet) 5%, var(--surface-2)); }
/* Champ d'écriture replié derrière un bouton : on ouvre cet onglet pour
   relire, le formulaire ne doit pas occuper le haut de la carte en permanence. */
.doss-boutons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.doss-plier {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px; font-family: inherit;
  font-size: 12.5px; font-weight: 600; background: var(--surface);
  border: 1px dashed var(--border-strong); color: var(--text-2);
  transition: background 0.13s ease, color 0.13s ease;
}
.doss-plier.est-ouvert { border-style: solid; }
.doss-plier:disabled { opacity: 0.6; cursor: default; }
.doss-plier-prive {
  border-color: color-mix(in oklch, var(--c-violet) 40%, var(--border));
  color: color-mix(in oklch, var(--c-violet) 72%, var(--text));
}
.doss-plier-prive:hover:not(:disabled) { background: color-mix(in oklch, var(--c-violet) 12%, var(--surface)); }
.doss-card.vig-locked { position: relative; min-height: 240px; }
.doss-card.vig-locked .panel-head, .doss-card.vig-locked .panel-head ~ * { filter: blur(6px); pointer-events: none; user-select: none; }
.doss-card.vig-locked .vig-gate { filter: none; }
.doss-vide { font-size: 12.5px; line-height: 1.5; color: var(--text-3); margin: 4px 0 0; }
.doss-erreur { font-size: 12px; line-height: 1.45; color: var(--danger, #b3453f); margin: 6px 0 0; }
.doss-modifiee { font-size: 11px; color: var(--text-3); font-style: italic; }
.doss-liste { display: flex; flex-direction: column; gap: 10px; }
/* Une entrée = un envoi ou une note. Fond neutre : ce sont des archives,
   elles ne doivent pas concurrencer les suggestions vivantes de l'accueil. */
.doss-entree {
  padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
}
.doss-entree-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.doss-quand {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--accent-dark);
}
/* Le nom de l'autrice n'est pas affiché : dans un espace mono-utilisateur,
   c'est toujours la psychologue connectée. Le champ reste enregistré, il
   servira le jour où le dossier sera partagé (journal de traçabilité). */
.doss-entree-actions { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex-shrink: 0; }
/* Origine de la consigne : suggestion de Livana, ou écrit de la psychologue */
.doss-origine {
  flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  color: var(--text-3); background: var(--surface); border: 1px solid var(--border);
}
.doss-suppr {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.doss-suppr:hover { background: color-mix(in oklch, var(--c-rose) 16%, transparent); color: var(--c-rose); }
/* Confirmation en deux temps : un écrit clinique ne s'efface pas d'un clic. */
.doss-confirm { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); flex-shrink: 0; }
.doss-confirm-oui, .doss-confirm-non {
  font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border);
}
.doss-confirm-oui { background: var(--c-rose); border-color: var(--c-rose); color: #fff; }
.doss-confirm-non { background: var(--surface); color: var(--text-2); }
.doss-editer {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.doss-editer:hover { background: var(--accent-soft); color: var(--accent-dark); }
.doss-ligne-edit { flex: 1; min-width: 0; }
.doss-ligne-edit-btns { display: flex; gap: 8px; margin-top: 7px; }
.doss-note-tx { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text); white-space: pre-wrap; text-wrap: pretty; }
/* Raccourci vers le chat de la fiche, avec la question déjà amorcée : on
   interroge ses notes au lieu de les relire toutes. */
.doss-questionner {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--accent-dark);
  background: var(--accent-soft); border: 1px solid transparent;
  transition: background 0.13s ease, border-color 0.13s ease;
}
.doss-questionner:hover { background: color-mix(in oklch, var(--accent-soft) 70%, var(--accent) 30%); border-color: var(--accent-soft); }
.doss-saisie { margin-bottom: 14px; }
/* Champ et bouton côte à côte, l'astuce dessous. */
.doss-saisie-ligne { display: flex; gap: 10px; align-items: flex-start; }
.doss-saisie-ligne .doss-champ { flex: 1; }
.doss-ajouter { white-space: nowrap; }
.doss-saisie .doss-astuce { display: block; margin-top: 6px; }
/* Séparateur de mois dans le fil des notes. */
.doss-mois {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 -2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
}
.doss-mois::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.doss-champ {
  width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit;
  font-size: 13px; line-height: 1.5; color: var(--text);
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color 0.13s ease;
}
.doss-champ:focus { outline: none; border-color: var(--accent); }
.doss-champ::placeholder { color: var(--text-3); }
.doss-saisie-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.doss-astuce { font-size: 11px; color: var(--text-3); }
@media (max-width: 620px) { .doss-astuce { display: none; } .doss-saisie-pied { justify-content: flex-end; } }
@media (max-width: 760px) { .suivi-q-list-cols { columns: 1; } }
.suivi-instr { margin-top: 14px; padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius); font-size: 13px; line-height: 1.5; color: var(--text-2); }
.suivi-instr-lbl { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.suivi-grid { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.suivi-top { display: block; }
.suivi-top > * { min-width: 0; }
.suivi-side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; align-items: start; }
@media (max-width: 880px) { .suivi-side { grid-template-columns: 1fr; } }
.suivi-top .suivi-chat-card { display: flex; flex-direction: column; padding-bottom: 18px; }
.suivi-top .suivi-chat { flex: none; height: 520px; min-height: 0; }
@media (max-width: 880px) { .suivi-side { grid-template-columns: 1fr; } }
.suivi-chat-card { display: flex; flex-direction: column; }
.suivi-chat { height: 460px; display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 4px; }
.suivi-chat .chat-shell { flex: 1; height: 100%; min-height: 0; box-shadow: none; border: none; border-radius: var(--radius); }
.suivi-chat .chat-gpt .chat-thread { min-height: 0; }
.suivi-q-note { display: block; font-size: 12px; color: var(--text-3); margin-top: 3px; font-style: italic; }
.hist-list { display: flex; flex-direction: column; }
.hist-item { display: flex; gap: 14px; padding: 13px 0; border-top: 1px dashed var(--border); }
.hist-item:first-child { border-top: none; padding-top: 0; }
.hist-date { flex-shrink: 0; width: 56px; font-size: 11.5px; font-weight: 600; color: var(--accent-dark); padding-top: 1px; }
.hist-body { min-width: 0; }
.hist-q { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.hist-a { font-size: 12.5px; line-height: 1.5; color: var(--text-2); }

/* Retour de Livana — timeline */
.rl-timeline { display: flex; flex-direction: column; }
.rl-entry { display: flex; gap: 14px; }
.rl-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; padding-top: 4px; }
.rl-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.rl-entry:not(:last-child) .rl-marker::after { content: ''; flex: 1; width: 2px; background: var(--border); margin: 6px 0 0; }
.rl-content { flex: 1; min-width: 0; padding-bottom: 18px; }
.rl-entry:last-child .rl-content { padding-bottom: 0; }
.rl-meta { margin-bottom: 4px; }
.rl-date { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-dark); }
.rl-q { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.rl-a { font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.rl-livana { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent-dark); margin-right: 7px; vertical-align: 1px; }
.rl-orb { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, oklch(0.85 0.06 175), var(--accent)); }
.rl-more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  padding: 9px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--surface-2); color: var(--accent-dark); transition: background 0.13s ease;
}
.rl-more:hover { background: var(--accent-soft); }
.rl-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.rl-ask {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  padding: 9px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--accent); color: #fff; transition: background 0.13s ease;
}
.rl-ask:hover { background: var(--accent-dark); }
.rl-ask-orb { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, oklch(0.9 0.05 175), #fff); opacity: 0.92; }

/* Retour de Livana — Q&A bulles */
.rl-qa-list { display: flex; flex-direction: column; gap: 16px; }
.rl-qa { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px dashed var(--border); }
.rl-qa:last-child { padding-bottom: 0; border-bottom: none; }
.rl-qa-head { display: flex; align-items: center; }
.rl-qa-date { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.rl-qa-q { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.45; }
.rl-qa-tag { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-dark); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; margin-right: 9px; vertical-align: 2px; }
.rl-qa-bubble { display: flex; align-items: flex-start; gap: 10px; background: var(--surface-2); border-radius: 4px 14px 14px 14px; padding: 12px 14px; }
.rl-qa-av { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 32% 30%, oklch(0.85 0.06 175), var(--accent)); }
.rl-qa-txt { font-size: 12.5px; line-height: 1.55; color: var(--text); }
.hist-report { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; }
.hist-report .cfg-label { margin-bottom: 8px; }
.hist-report-sent { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--accent-dark); background: var(--accent-soft); padding: 11px 13px; border-radius: var(--radius); }
.hist-report-sent svg { flex-shrink: 0; }
@media (max-width: 760px) { .suivi-grid { grid-template-columns: 1fr; } }
.suivi-chat-card { padding-bottom: 0; }
.suivi-chat { height: 460px; display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 4px; }
.suivi-chat .chat-shell { flex: 1; height: 100%; box-shadow: none; }
.dir-q-block { display: flex; flex-direction: column; gap: 6px; }
.ret-opts { display: flex; flex-direction: column; gap: 8px; }
.ret-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); transition: border-color 0.14s ease, background 0.14s ease;
}
.ret-opt:hover { border-color: var(--border-strong); }
.ret-opt.active { border-color: var(--accent); background: var(--accent-soft); }
.ret-opt-radio {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border-strong); transition: all 0.14s ease;
}
.ret-opt.active .ret-opt-radio { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 5px, transparent 6px); }
.ret-opt-tx { display: flex; flex-direction: column; gap: 1px; }
.ret-opt-l { font-size: 14px; font-weight: 600; color: var(--text); }
.ret-opt-s { font-size: 11.5px; color: var(--accent-dark); font-weight: 600; }
.ret-danger { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.ret-danger-solo { margin-top: 0; padding-top: 0; border-top: none; }
.ret-danger-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; }
.ret-danger-ic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; background: var(--danger-soft); color: var(--danger); display: inline-flex; align-items: center; justify-content: center; }
.ret-danger-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ret-danger-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: oklch(0.50 0.16 25); }
.ret-danger-confirm { display: flex; flex-direction: column; gap: 9px; }
.ret-danger-warn { font-size: 12px; line-height: 1.45; color: var(--text-2); margin: 0; background: var(--danger-soft); padding: 10px 12px; border-radius: 10px; }
.ret-danger-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.ret-danger-done { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--accent-dark); background: var(--accent-soft); padding: 11px 13px; border-radius: 10px; }
.dir-optional {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-3); background: var(--surface-2); padding: 2px 8px; border-radius: 999px;
  margin-left: 8px; vertical-align: middle;
}
@media (max-width: 900px) { .dir-grid { grid-template-columns: 1fr; } }

/* Configuration éditable en ligne */
.cfg-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
.cfg-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.cfg-card-ic {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-dark);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 2px;
}
.cfg-card-title { margin: 0; font-size: 15px; font-weight: 600; }
.cfg-card-desc { font-size: 12.5px; line-height: 1.5; color: var(--text-2); margin: 0; flex: 1; }
.cfg-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-card-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cfg-card-list li {
  font-size: 12px; line-height: 1.4; color: var(--text-2);
  padding: 7px 10px; background: var(--surface-2); border-radius: var(--radius-sm);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cfg-card-list .cfg-card-more { background: transparent; color: var(--text-3); font-weight: 600; padding: 2px 10px; }
.cfg-card-note {
  font-size: 12px; line-height: 1.45; color: var(--text-3); margin: 0;
  padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm);
}
.btn-block { width: 100%; margin-top: 4px; }
@media (max-width: 900px) { .cfg-cards-grid { grid-template-columns: 1fr; } }

/* Configuration Livana réelle du résident (lecture seule, source Firebase) */
.cfg-live { display: flex; flex-direction: column; gap: 16px; }
.cfg-bloc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cfg-bloc { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cfg-bloc-large { grid-column: 1 / -1; }
.cfg-bloc-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-3);
}
.cfg-bloc-val {
  font-size: 13.5px; line-height: 1.55; color: var(--text);
  padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm);
  white-space: pre-wrap; word-break: break-word;
}
.cfg-bloc-long { max-height: 260px; overflow-y: auto; }
.cfg-maj { font-size: 12px; color: var(--text-3); margin: 0; }
.cfg-vide { color: var(--text-3); font-style: italic; }
.cfg-bloc-input { width: 100%; font-size: 13.5px; line-height: 1.55; }
textarea.cfg-bloc-input { resize: vertical; }
.cfg-live-bar {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  flex-wrap: wrap;
}
.cfg-live-hint { font-size: 12.5px; color: var(--text-2); margin-right: auto; display: inline-flex; align-items: center; gap: 6px; }
.cfg-live-ok {
  font-size: 12.5px; font-weight: 600; color: var(--accent-dark);
  display: inline-flex; align-items: center; gap: 6px;
}
.cfg-live-err {
  font-size: 13px; color: oklch(0.45 0.12 25); padding: 10px 12px;
  background: oklch(0.97 0.02 25); border: 1px solid oklch(0.85 0.06 25);
  border-radius: var(--radius-sm);
}
@media (max-width: 900px) { .cfg-bloc-grid { grid-template-columns: 1fr; } }
.cfg-inline { display: flex; flex-direction: column; gap: 16px; }
.cfg-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.cfg-toolbar-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.cfg-toolbar-sub { font-size: 12px; color: var(--text-3); }
.cfg-toolbar-actions { display: flex; gap: 8px; }
.cfg-inline.is-locked .cfg-input,
.cfg-inline.is-locked .cfg-textarea,
.cfg-inline.is-locked .dir-input { cursor: default; }
.cfg-input:disabled, .cfg-textarea:disabled, .dir-input:disabled {
  background: var(--surface-2); color: var(--text); opacity: 1;
  border-color: transparent; -webkit-text-fill-color: var(--text);
}
.cfg-inline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cfg-inline .card.panel { display: flex; flex-direction: column; gap: 14px; }
.cfg-inline .panel-head { margin-bottom: 0; }
.cfg-2col { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: start; }
.cfg-2col .cfg-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .cfg-inline-grid { grid-template-columns: 1fr; } .cfg-2col { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .kpi-row-wide { grid-template-columns: 1fr 1fr; }
  .call-list-grid { grid-template-columns: 1fr; }
  .cfg-grid { grid-template-columns: 1fr; }
}

.prof-tabpane .prof-grid-chat .prof-chat-col { height: calc(100vh - 64px - 56px - 64px); }

/* chat-hero variant — chat dominant, clinical data as a side rail */
.prof-grid-chat { grid-template-columns: 1.75fr 1fr; }
.prof-chat-col { position: sticky; top: 0; height: calc(100vh - 64px - 56px); min-height: 560px; display: flex; }
.prof-chat-col .chat-shell { flex: 1; height: 100%; box-shadow: var(--shadow-md); }
.prof-chat-col .chat-embed { height: 100% !important; min-height: 0 !important; position: static !important; }
.prof-rail { gap: 14px; }
.prof-rail .kpi-row { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.prof-rail .kpi { padding: 13px 12px; }
.prof-rail .kpi-val { font-size: 20px; }
.prof-rail .panel { padding: 16px; }
.prof-rail h3 { font-size: 14px; }
.prof-col { display: flex; flex-direction: column; gap: 16px; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi {
  padding: 15px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.kpi-label { font-size: 11.5px; color: var(--text-3); font-weight: 600; letter-spacing: 0.02em; }
.kpi-val { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; line-height: 1; }
.kpi-sub {
  font-size: 11.5px; color: var(--text-3); margin-top: 5px;
  /* « 13/20 appels · 7j » mesure 89 px pour 89 disponibles : ca tient,
     mais au pixel pres. Un resident a trois chiffres d'appels, ou une
     police systeme un peu plus large, ferait passer le sous-titre sur
     deux lignes et desalignerait les trois tuiles. On tronque plutot
     que de casser l'alignement — le detail complet est dans l'infobulle. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* mood chart */
.chart-wrap { position: relative; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.chart-legend .dot { width: 9px; height: 9px; border-radius: 50%; }
/* Flèches indiquant les extrémités de l'échelle d'humeur */
.chart-legend .legend-arrow { font-weight: 700; color: var(--text-3); margin-left: -3px; }

.chart-tip {
  position: absolute; pointer-events: none; transform: translate(-50%, -120%);
  background: var(--text); color: var(--bg); padding: 6px 9px; border-radius: 8px;
  font-size: 11.5px; white-space: nowrap; box-shadow: var(--shadow-md); z-index: 5;
  opacity: 0; transition: opacity 0.12s ease;
}
.chart-tip.show { opacity: 1; }

/* topics */
.topic-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.topic-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; margin-bottom: 11px; }
.topic-h .ic { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.topic-h.calm .ic { background: var(--accent-soft); color: var(--accent-dark); }
.topic-h.trig .ic { background: var(--warn-soft); color: var(--warn); }
.topic-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.topic-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  background: var(--surface-2); color: var(--text);
}
.topic-tag.calm { background: var(--accent-soft); color: var(--accent-dark); }
.topic-tag.trig { background: var(--warn-soft); color: oklch(0.42 0.08 60); }
.topic-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; margin-left: 2px;
  background: rgba(0,0,0,0.07); color: inherit; transition: background 0.12s ease;
}
.topic-del:hover { background: rgba(0,0,0,0.16); }
.topic-add { display: flex; gap: 8px; margin-top: 12px; }
.topic-add input {
  flex: 1; min-width: 0; padding: 8px 12px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.topic-add input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.topic-edit { display: flex; flex-direction: column; gap: 8px; }
.topic-slot { display: flex; align-items: center; gap: 9px; }
.topic-slot-num {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: 12px; font-weight: 700;
}
.topic-slot-num.add { background: var(--surface-2); color: var(--text-3); }
.topic-slot-input {
  flex: 1; min-width: 0; padding: 8px 12px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.topic-slot-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.topic-slot-del {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); transition: background 0.12s ease, color 0.12s ease;
}
.topic-slot-del:hover { background: var(--danger-soft); color: var(--danger); }
.topic-slot-add { margin-top: 2px; }
.topic-count { font-size: 11.5px; font-weight: 600; color: var(--text-3); margin-left: 4px; }
.topic-limit { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12px; color: var(--accent-dark); background: var(--accent-soft); padding: 8px 11px; border-radius: 10px; }

/* expand chart */
.chart-expand-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--accent-dark);
  padding: 6px 11px; border-radius: 999px; background: var(--accent-soft);
  transition: background 0.13s ease;
}
.chart-expand-btn:hover { background: color-mix(in oklch, var(--accent-soft) 70%, var(--accent) 30%); }
.chart-expand-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.chart-modal-backdrop {
  position: fixed; inset: 0; z-index: 300; background: rgba(20,20,18,0.5);
  display: flex; align-items: center; justify-content: center; padding: 40px;
  backdrop-filter: blur(2px);
}
.chart-modal {
  width: min(960px, 94vw); background: var(--surface);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: popIn 0.22s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden;
}
.chart-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 22px 26px; border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--accent-soft) 45%, var(--surface));
}
.chart-period { display: flex; gap: 4px; margin-left: auto; margin-right: 12px; background: var(--surface-2); border-radius: 10px; padding: 3px; align-self: center; }
.chart-period-btn { padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-3); border-radius: 7px; transition: all 0.12s ease; }
.chart-period-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.chart-period-btn:hover:not(.active) { color: var(--text); }
.chart-modal-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-top: 4px; }
.chart-modal-body { padding: 28px 30px 32px; }
.calls-modal { width: min(620px, 96vw); max-height: 86vh; display: flex; flex-direction: column; }
.calls-modal-body { padding: 18px 20px 22px; overflow-y: auto; }
.calls-modal-body .call-list { gap: 12px; }

.note-card {
  padding: 16px 18px; background: color-mix(in oklch, var(--accent-soft) 55%, var(--surface));
  border: 1px solid var(--accent-soft); border-radius: var(--radius);
  display: flex; gap: 12px; align-items: flex-start;
}
.note-card .q { font-size: 38px; line-height: 0.8; color: var(--accent); font-family: var(--font-display); font-style: italic; }
.note-card .body { font-size: 13.5px; line-height: 1.55; color: var(--text); }
.note-card .by { font-size: 11.5px; color: var(--text-3); margin-top: 8px; }

/* story */
.story { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.info-list { display: flex; flex-direction: column; }
.info-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px dashed var(--border); font-size: 13px; }
.info-row:first-child { border-top: none; }
.info-row .k { color: var(--text-3); }
.info-row .v { font-weight: 600; }

/* call history list */
.call-list { display: flex; flex-direction: column; gap: 10px; }
.call-item {
  padding: 15px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); text-align: left; width: 100%; cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.call-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.call-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.call-when { font-size: 12.5px; font-weight: 600; color: var(--text); }
.call-dur { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.call-mood-flow { display: inline-flex; align-items: center; gap: 7px; }
.call-arrow { color: var(--text-3); display: inline-flex; }
.call-summary { font-size: 13px; line-height: 1.5; color: var(--text-2); position: relative; }
.call-summary.locked { filter: blur(5px); user-select: none; }
.is-unlocked .call-summary.locked { filter: none; user-select: auto; }
.call-item-foot { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.call-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 11px; margin-top: 2px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  font-size: 13px; font-weight: 600; color: var(--accent-dark); background: var(--surface);
  transition: background 0.13s ease, border-color 0.13s ease;
}
.call-more:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.lock-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--text-3);
}

/* ───────────────────────── Call panel (right drawer) ───────────────────────── */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(20,20,18,0.36);
  z-index: 330;
  animation: drawerFadeIn 0.26s ease;
}
/* Fermeture : le fond s'estompe (forwards → reste transparent jusqu'au démontage) */
.drawer-backdrop.closing { animation: drawerFadeOut 0.24s ease forwards; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 94vw); background: var(--surface);
  z-index: 331; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  animation: drawerIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Fermeture : le tiroir coulisse vers la droite jusqu'à sortir de l'écran */
.drawer.closing { animation: drawerOut 0.24s cubic-bezier(0.4, 0, 1, 1) forwards; }
/* Tactile (téléphone et tablette) : le glissé gauche→droite ferme le tiroir.
   pan-y laisse le défilement vertical au navigateur et nous réserve l'axe
   horizontal — sans quoi le geste déclencherait le « retour » du navigateur. */
@media (max-width: 1024px) { .drawer { touch-action: pan-y; } }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes drawerOut { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes drawerFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawerFadeOut { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer.closing, .drawer-backdrop, .drawer-backdrop.closing { animation-duration: 0.01ms; }
}
.drawer-head {
  padding: 20px 22px; border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--accent-soft) 60%, var(--surface));
}
.drawer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.drawer-close {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; transition: all 0.14s ease;
}
.drawer-close:hover { background: var(--surface-2); color: var(--text); }
.drawer-top-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.drawer-del {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center; transition: all 0.14s ease;
}
.drawer-del:hover { background: var(--danger-soft); border-color: var(--danger-soft); color: var(--danger); }
/* Barre de confirmation de suppression, épinglée en bas du tiroir */
.drawer-confirm {
  border-top: 1px solid var(--border); padding: 16px 22px;
  background: color-mix(in oklch, var(--danger-soft) 45%, var(--surface));
  display: flex; flex-direction: column; gap: 12px;
}
.drawer-confirm-txt { font-size: 13px; line-height: 1.5; color: var(--text); }
.drawer-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.btn-danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.btn-danger:hover { filter: brightness(0.95); }
.btn-danger:disabled { opacity: 0.6; cursor: default; }
.drawer-name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.drawer-when { font-size: 12.5px; color: var(--text-2); margin-top: 3px; font-variant-numeric: tabular-nums; }
.drawer-flow { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.drawer-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 22px; }
/* La réplique citée par un fil, dans sa couleur (points de vigilance, découvertes). */
.bubble.surligne { background: var(--ton-doux); border: 2px solid var(--ton); box-shadow: 0 0 0 4px color-mix(in oklch, var(--ton) 14%, transparent); }
.bubble.surligne .who { color: var(--ton); }
.bubble.surligne.rouge { --ton: oklch(0.52 0.13 25); --ton-doux: oklch(0.96 0.025 25); }
.bubble.surligne.vert { --ton: oklch(0.46 0.10 155); --ton-doux: oklch(0.96 0.03 150); }
.bubble.surligne.sauge { --ton: var(--accent-dark); --ton-doux: var(--accent-soft); }
.drawer-block { margin-bottom: 24px; }
.drawer-block:last-child { margin-bottom: 0; }
.drawer-block-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.drawer-block-actions { display: flex; align-items: center; gap: 8px; }
.drawer-block-h .eyebrow { margin: 0; }
.drawer-summary { font-size: 14px; line-height: 1.6; color: var(--text); }

/* transcript */
.transcript { display: flex; flex-direction: column; gap: 11px; }
.bubble { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.5; }
.bubble .who { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; opacity: 0.65; }
.bubble.livana { background: var(--accent-soft); color: var(--accent-dark); border-bottom-left-radius: 4px; align-self: flex-start; }
.bubble.resident { background: var(--surface-2); color: var(--text); border-bottom-right-radius: 4px; align-self: flex-end; }

/* confidentiality lock overlay inside drawer */
.locked-zone { position: relative; }
.locked-zone.is-locked .lz-content { filter: blur(7px); pointer-events: none; user-select: none; }
/* Ancré vers le HAUT, pas centré : la transcription floutée fait souvent
   plusieurs milliers de pixels, et un calque centré posait le bouton au milieu
   de cette hauteur — il fallait défiler longtemps pour déverrouiller un appel
   bavard. Même traitement que .cfg-verrou dans l'onglet Configuration. */
.lz-gate {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; gap: 12px; padding: 24px;
  padding-top: 96px;
}
.lz-gate.hidden { display: none; }
.lz-lockic {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-dark); box-shadow: var(--shadow-md);
}
.lz-title { font-size: 15px; font-weight: 600; }
.lz-sub { font-size: 12.5px; color: var(--text-2); max-width: 280px; line-height: 1.5; }

/* PIN modal */
.pin-modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,20,18,0.5);
  z-index: 400; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.pin-modal {
  width: 340px; background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 28px 26px;
  text-align: center; animation: popIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes popIn { from { transform: scale(0.96); } to { transform: scale(1); } }
.pin-ic {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
}
.pin-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.pin-sub { font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.5; }
.pin-inputs { display: flex; gap: 12px; justify-content: center; margin: 24px 0 6px; }
.pin-box {
  width: 56px; height: 64px; border-radius: 14px;
  border: 1.5px solid var(--border-strong); background: var(--surface-2);
  text-align: center; font-size: 26px; font-weight: 700; color: var(--text);
  outline: none; transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
  -webkit-text-security: disc;
}
.pin-box:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.pin-box.filled { border-color: var(--accent); background: var(--surface); }
.pin-box.err { border-color: var(--danger); }
.pin-actions { margin-top: 14px; }
.pin-modal.shake { animation: shake 0.4s ease; }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-8px);} 40%,80%{transform:translateX(8px);} }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-key {
  height: 52px; border-radius: 12px; background: var(--surface-2);
  font-size: 19px; font-weight: 600; color: var(--text);
  transition: background 0.1s ease, transform 0.06s ease;
}
.pin-key:hover { background: var(--border); }
.pin-key:active { transform: scale(0.95); }
.pin-key.action { background: transparent; color: var(--text-3); font-size: 13px; font-weight: 600; }
.pin-key.action:hover { background: var(--surface-2); }
.pin-err { font-size: 12px; color: var(--danger); margin-top: 12px; height: 14px; }
.pin-hint { font-size: 11px; color: var(--text-3); margin-top: 14px; }

/* sensitive ribbon */
.sensitive-ribbon {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--warn-soft); color: oklch(0.40 0.08 55);
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
}

/* ───────────────────────── Assistant IA ───────────────────────── */
.assistant-wrap { display: flex; flex-direction: column; height: 100%; }
.chat-shell {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); position: relative;
}
.chat-shell.is-locked > *:not(.chat-lock):not(.chat-topbanner) { filter: blur(6px); pointer-events: none; user-select: none; }
.chat-lock {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 12px; padding: 28px;
  background: color-mix(in oklch, var(--surface) 55%, transparent);
}
.chat-lock-ic {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-dark); box-shadow: var(--shadow-md);
}
.chat-lock-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.chat-lock-sub { font-size: 13px; color: var(--text-2); max-width: 320px; line-height: 1.55; }
.chat-head {
  display: flex; align-items: center; gap: 12px; padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--accent-soft) 45%, var(--surface));
}
.chat-head-expand {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.chat-head-expand:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-dark); }
.chat-fs-layer { position: fixed; inset: 0; z-index: 400; }
.chat-float-expand {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-3);
  transition: background 0.14s ease, color 0.14s ease;
}
.chat-float-expand:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-dark); }
.chat-fs-backdrop {
  position: absolute; inset: 0; background: rgba(20,20,18,0.5);
  animation: fadeIn 0.18s ease;
}
.chat-shell.chat-fullscreen {
  position: absolute; inset: max(24px, 4vh) max(24px, 6vw); height: auto !important;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  animation: popIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-orb-spark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); }
.chat-orb {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C12 7 17 12 22 12 17 12 12 17 12 22 12 17 7 12 2 12 7 12 12 7 12 2Z' transform='translate(-0.6 3.4) scale(0.8)'/%3E%3Cpath d='M12 2C12 7 17 12 22 12 17 12 12 17 12 22 12 17 7 12 2 12 7 12 12 7 12 2Z' transform='translate(12.6 0.4) scale(0.46)'/%3E%3Cpath d='M12 2C12 7 17 12 22 12 17 12 12 17 12 22 12 17 7 12 2 12 7 12 12 7 12 2Z' transform='translate(15.3 14.8) scale(0.3)'/%3E%3C/svg%3E") center / 60% no-repeat,
    radial-gradient(circle at 32% 30%, oklch(0.85 0.06 175), var(--accent));
  box-shadow: 0 4px 14px -4px oklch(0.62 0.07 175 / 0.55);
  position: relative;
}
.chat-orb.pulsing::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent); animation: orbRipple 1.8s ease-out infinite;
}
@keyframes orbRipple { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } }
.chat-head-title { font-size: 14px; font-weight: 600; }
.chat-head-sub { font-size: 11.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.chat-head-sub .online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--online); }

.chat-context {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 6px 5px 12px; position: relative;
}
.chat-context-label { font-size: 11px; color: var(--text-3); }
.chat-context-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 6px 4px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: 12px; font-weight: 600;
}
.chat-context-pill .x { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.06); }
.chat-context-pick {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--accent-dark);
  padding: 4px 8px; border-radius: 999px;
}
.chat-context-pick:hover { background: var(--accent-soft); }

.ctx-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  width: 260px; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px;
}
.ctx-search { padding: 8px 10px; }
.ctx-search input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: 13px; outline: none; }
.ctx-search input:focus { border-color: var(--accent); }
.ctx-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; width: 100%; text-align: left; transition: background 0.1s ease; }
.ctx-opt:hover { background: var(--surface-2); }
.ctx-opt .nm { font-size: 13px; font-weight: 500; }
.ctx-opt .rm { font-size: 11px; color: var(--text-3); }

.chat-thread { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px; display: flex; flex-direction: column; gap: 14px; background: var(--surface-2); min-width: 0; }
.chat-msg { display: flex; gap: 10px; max-width: 88%; }
.chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg.assistant { align-self: flex-start; }
.chat-msg-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
.chat-msg.assistant .chat-msg-av { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C12 7 17 12 22 12 17 12 12 17 12 22 12 17 7 12 2 12 7 12 12 7 12 2Z' transform='translate(-0.6 3.4) scale(0.8)'/%3E%3Cpath d='M12 2C12 7 17 12 22 12 17 12 12 17 12 22 12 17 7 12 2 12 7 12 12 7 12 2Z' transform='translate(12.6 0.4) scale(0.46)'/%3E%3Cpath d='M12 2C12 7 17 12 22 12 17 12 12 17 12 22 12 17 7 12 2 12 7 12 12 7 12 2Z' transform='translate(15.3 14.8) scale(0.3)'/%3E%3C/svg%3E") center / 62% no-repeat,
    radial-gradient(circle at 32% 30%, oklch(0.85 0.06 175), var(--accent)); color: #fff; }
.chat-msg.user .chat-msg-av { background: var(--accent-soft); color: var(--accent-dark); }
.chat-bubble {
  padding: 11px 15px; border-radius: 16px; font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap; word-wrap: break-word;
}
.chat-msg.assistant .chat-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; color: var(--text); }
.chat-msg.user .chat-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.chat-bubble strong { font-weight: 700; }
/* Première ligne d'une réponse du chatbot : les dates des appels lus. */
.per-tete { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--accent-dark); padding-bottom: 8px; margin-bottom: 9px; border-bottom: 1px solid var(--border); white-space: normal; }
.per-tete svg { flex-shrink: 0; }
.per-tete.est-defaut { color: var(--text-3); }
.chat-bubble em { font-style: italic; color: var(--text-2); }
/* Séparateur de section (`---` renvoyé par le modèle) : un filet discret
   plutôt que trois tirets en clair. Marges serrées — la bulle est déjà en
   pre-wrap, les sauts de ligne autour sont conservés. */
.chat-sep { border: none; border-top: 1px solid var(--border); margin: 10px 0 8px; }
.chat-bubble .insight {
  display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-3);
}
/* Écran d'attente pendant la reprise de session (« Rester connectée ») */
.session-restore {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; background: var(--bg);
}
.session-restore-logo { width: 132px; height: auto; opacity: 0.9; }
.session-restore-tx { font-size: 14px; color: var(--text-3); animation: sessionPulse 1.6s ease-in-out infinite; }
@keyframes sessionPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Curseur affiché pendant que la réponse s'écrit au fil de l'eau */
.chat-caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  vertical-align: text-bottom; background: var(--accent);
  animation: chatCaret 1s steps(2) infinite;
}
@keyframes chatCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.typing { display: inline-flex; align-items: center; gap: 4px; padding: 14px 16px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); opacity: 0.4; animation: typingBounce 1.4s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.2s; }
.typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce { 0%,60%,100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chat-suggest { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 20px 14px; background: var(--surface-2); }
.chat-suggest-h { width: 100%; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; padding-top: 4px; }
.suggest-chip {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 8px 13px; border-radius: 999px; font-size: 12.5px; transition: all 0.13s ease; text-align: left;
}
.suggest-chip:hover { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-soft); }

.chat-composer { padding: 12px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.chat-composer-inner {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px;
  padding: 6px 6px 6px 14px; transition: border-color 0.15s ease, background 0.15s ease;
}
.chat-composer-inner:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-input { flex: 1; border: none; outline: none; background: transparent; resize: none; font-size: 13.5px; color: var(--text); line-height: 1.5; padding: 8px 0; max-height: 120px; }
.chat-send {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.14s ease;
}
.chat-send:hover:not(:disabled) { background: var(--accent-dark); }
.chat-send:disabled { background: var(--border-strong); cursor: not-allowed; }
.chat-foot { font-size: 10.5px; color: var(--text-3); text-align: center; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }

.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 30px; color: var(--text-3); }
.chat-empty .orb { width: 60px; height: 60px; }
.chat-empty-title { font-size: 16px; font-weight: 600; color: var(--text); }
.chat-empty-sub { font-size: 13px; color: var(--text-2); max-width: 320px; line-height: 1.5; }

/* assistant visual variants */
.asst-flat .chat-thread { background: var(--surface); }
.asst-flat .chat-msg.assistant .chat-bubble { background: var(--surface-2); border-color: transparent; }
.asst-flat .chat-suggest { background: var(--surface); }
.asst-bubbleless .chat-msg.assistant .chat-bubble { background: transparent; border: none; padding-left: 0; padding-right: 0; }

/* assistant full-page */
.assistant-fullpage { height: 100%; display: flex; }
.assistant-fullpage .chat-shell {
  flex: 1; height: 100%; border: none; border-radius: 0; box-shadow: none;
}
.assistant-fullpage .chat-thread,
.assistant-fullpage .chat-suggest { padding-left: max(28px, 8vw); padding-right: max(28px, 8vw); }
.assistant-fullpage .chat-composer { padding-left: max(20px, 7.5vw); padding-right: max(20px, 7.5vw); }
.assistant-fullpage .chat-head { padding-left: max(18px, 8vw); padding-right: max(18px, 8vw); }
.assistant-fullpage .chat-msg { max-width: 760px; width: fit-content; }
.assistant-fullpage .chat-msg.user { margin-left: auto; }

/* ChatGPT-style assistant page */
.chat-gpt { background: var(--surface); }
.chat-gpt .chat-head { background: var(--surface); border-bottom: 1px solid var(--border); }
.chat-gpt .gpt-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 0; }
.chat-gpt .gpt-center-inner { width: 100%; max-width: 820px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.chat-gpt .gpt-title { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; margin: 6px 0 0; }
.chat-gpt .gpt-sub { font-size: 14px; color: var(--text-2); max-width: 440px; line-height: 1.55; margin-bottom: 6px; }
.chat-gpt .gpt-center-inner .chat-composer { width: 100%; border-top: none; padding: 0; background: transparent; }
.chat-gpt .gpt-center-inner .chat-composer-inner { border-radius: 26px; padding: 8px 8px 8px 18px; box-shadow: var(--shadow-md); }
.chat-gpt .gpt-center-inner .chat-suggest { justify-content: center; padding: 6px 0 0; background: transparent; max-width: 820px; margin: 0 auto; gap: 9px; }
.chat-gpt .gpt-center-inner .suggest-chip { font-size: 12px; padding: 7px 12px; color: var(--text-2); text-align: center; }
.chat-gpt .gpt-center-inner .suggest-chip:hover { color: var(--accent-dark); }
/* Bouton « Afficher plus » des suggestions du grand chat : réservé au
   tactile (mobile + tablette) — sur bureau toutes les questions s'affichent */
.suggest-more-tactile { display: none; }
@media (max-width: 1024px) {
  .chat-suggest:not(.chat-suggest-open) .suggest-chip:nth-of-type(n+2) { display: none; }
  .suggest-more-tactile { display: block; }
  /* Le texte d'invite du champ tient sur une seule ligne (coupé par des
     points de suspension plutôt que replié sur deux lignes tronquées) */
  .chat-input::placeholder { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
}
.suggest-more {
  width: 100%; text-align: center; font-size: 11.5px; font-weight: 600;
  color: var(--accent-dark); padding: 6px; margin-top: 2px;
}
.suggest-more:hover { color: var(--accent); }
.chat-gpt .gpt-center-inner .chat-suggest-h { text-align: center; }

/* active conversation: centred column, composer pinned bottom */
.chat-gpt .chat-thread { background: var(--surface); padding: 28px 0; align-items: stretch; }
.chat-gpt .chat-thread .chat-msg { max-width: 720px; width: 100%; margin: 0 auto; padding: 0 24px; }
.chat-gpt .chat-thread .chat-msg.user { margin: 0 auto; flex-direction: row-reverse; }
.chat-gpt > .chat-composer { border-top: 1px solid var(--border); background: var(--surface); padding: 14px 24px 16px; }
.chat-gpt > .chat-composer .chat-composer-inner { max-width: 720px; margin: 0 auto; border-radius: 26px; padding: 8px 8px 8px 18px; box-shadow: var(--shadow-sm); }
.chat-gpt > .chat-composer .chat-foot { max-width: 720px; margin: 8px auto 0; }

/* embedded (in profile) chat fills the column but always fits the viewport */
.chat-embed { height: calc(100vh - 240px); min-height: 420px; position: sticky; top: 24px; }

/* ───────────────────────── Login ───────────────────────── */
/* min-height et non height : le formulaire de creation d'etablissement depasse
   la fenetre, la photo reste collee a gauche pendant que la colonne defile. */
.login-page { display: flex; min-height: 100vh; }
.login-aside {
  width: 46%; max-width: 620px; position: sticky; top: 0; height: 100vh; align-self: flex-start; overflow: hidden;
  background: #2a2722;
}
.login-aside img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.login-aside-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,28,26,0.15) 0%, rgba(28,28,26,0.78) 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 48px;
}
.login-aside-brand { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 40px; color: #fff; letter-spacing: -0.01em; }
.login-aside-tag { font-size: 16px; color: rgba(255,255,255,0.82); margin-top: 12px; line-height: 1.5; max-width: 380px; }
.login-aside-foot { font-size: 11px; color: rgba(255,255,255,0.6); letter-spacing: 0.04em; margin-top: 28px; text-transform: uppercase; }

/* Fond de la page de connexion : ivoire d'origine (#fafaf7), figé — il ne
   suit pas les ambiances de fond (celles-ci ne s'appliquent qu'une fois connecté). */
.login-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; background: #fafaf7; }
.login-box { width: 100%; max-width: 380px; }
/* En-tête de connexion centré ; les libellés du formulaire restent alignés
   à gauche, plus lisibles au-dessus de leur champ. */
.login-logo-row { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 36px; }
.login-eyebrow, .login-title, .login-desc { text-align: center; }
.login-logo-img { height: 44px; width: auto; display: block; }
.login-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark); }
.login-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 8px; }
.login-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.login-form { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.field-wrap { position: relative; display: flex; align-items: center; }
.field-wrap .lead-ic { position: absolute; left: 14px; color: var(--text-3); pointer-events: none; }
.field-input {
  width: 100%; padding: 13px 14px 13px 42px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 14.5px; color: var(--text); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field-eye { position: absolute; right: 12px; color: var(--text-3); width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.field-eye:hover { background: var(--surface-2); color: var(--text-2); }
.login-row { display: flex; align-items: center; justify-content: space-between; }
.checkbox-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.checkbox-row input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.forgot-link { font-size: 12.5px; font-weight: 600; color: var(--accent-dark); }
.forgot-link:hover { color: var(--accent); }
.login-submit { margin-top: 6px; padding: 14px; font-size: 14.5px; }
.login-rgpd {
  margin-top: 22px; padding: 13px 15px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; gap: 11px; align-items: flex-start;
}
.login-rgpd .ic { color: var(--accent-dark); flex-shrink: 0; margin-top: 1px; }
.login-rgpd .tx { font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
.login-rgpd .tx b { color: var(--text); font-weight: 600; }
.login-foot { margin-top: 28px; text-align: center; font-size: 11px; color: var(--text-3); letter-spacing: 0.04em; }

/* ───────────────────────── misc anims ───────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { transform: translateY(8px); } to { transform: translateY(0); } }
.fade-up { animation: fadeUp 0.3s ease; }

/* responsive */
/* Fiche résident : sur ordinateur les KPI vivent dans la colonne de droite ;
   l'instance du haut (mobile/tablette) est masquée. */
.prof-kpis-top { display: none; }
/* Les 3 KPI de la fiche restent sur UNE seule ligne, même sur petit écran
   (sinon la règle mobile générique .kpi-row les casserait en 2+1). Resserré
   pour tenir à trois sur la largeur d'un téléphone. */
.prof-kpis-top .kpi-row-3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.prof-kpis-top .kpi { padding: 12px 11px; }
.prof-kpis-top .kpi-val { font-size: 20px; margin-top: 4px; }
.prof-kpis-top .kpi-sub { margin-top: 3px; }

@media (max-width: 1080px) {
  .prof-grid { grid-template-columns: 1fr; }
  .prof-chat-col { position: static; height: 600px; }
  /* KPI au-dessus du chat : on montre l'instance du haut, on masque celle du rail */
  .prof-kpis-top { display: block; margin-bottom: 16px; }
  .prof-rail > .kpi-row { display: none; }
  .home-cols { grid-template-columns: 1fr; }
  .home-hero { grid-template-columns: 1fr; }
  .page-home { height: auto; }
  .home-hero-chat { height: 600px; }

  /* Connexion : le panneau photo passe en bandeau au-dessus du formulaire
     (il était simplement masqué, la page perdait toute son identité). */
  .login-page { flex-direction: column; height: auto; min-height: 100vh; }
  .login-aside { width: 100%; max-width: none; height: 210px; flex-shrink: 0; position: relative; }
  .login-aside img { object-position: center 32%; }
  .login-aside-overlay { justify-content: flex-end; padding: 20px 24px; }
  .login-aside-brand { font-size: 28px; }
  .login-aside-tag { font-size: 13px; margin-top: 6px; max-width: 100%; }
  .login-aside-foot { display: none; }
  /* Le bandeau porte déjà le nom Livana : le logo du formulaire ferait
     doublon. Le bloc de connexion remonte donc juste sous la photo. */
  .login-logo-row { display: none; }
  .login-main { padding: 28px 20px 40px; align-items: flex-start; }
}
/* ── Navigation mobile (barre fixée en bas, remplace la sidebar) ── */
.mobile-nav { display: none; }
@media (max-width: 720px) {
  .sidebar { display: none; }
  /* Les 4 compteurs de l'accueil : deux par ligne plutôt qu'empilés */
  .home-grid { grid-template-columns: 1fr 1fr; }
  .kpi-row { grid-template-columns: 1fr 1fr; }

  .mobile-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
  }
  .mnav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 2px 5px; border-radius: 10px; color: var(--text-3);
    transition: color 0.14s ease, background 0.14s ease;
  }
  .mnav-item.active { color: var(--accent-dark); background: var(--accent-soft); }
  /* Pastille de non-lus, posee sur le coin de l'icone — meme signal que
     dans le rail, en couleur d'alerte : un debrief non lu attend. */
  .mnav-item { position: relative; }
  .mnav-badge {
    position: absolute; top: 2px; right: calc(50% - 22px);
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--warn); color: #fff;
    font-size: 9.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  /* Documents : vert, comme dans le rail du bureau. */
  .mnav-badge.mnav-badge-vert { background: var(--accent); }
  .mnav-item.active .mnav-badge-vert { background: var(--accent-dark); }
  .mnav-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.01em; }

  /* Laisse la place à la barre : le contenu ne finit jamais caché dessous */
  .scroll-area { padding-bottom: 84px; }

  /* Page Copilot : le chat occupe TOUT l'écran, bord à bord, jusqu'au menu du
     bas — pas de gouttière de barre ni d'espace réservé sous lui. Seul le
     champ de saisie garde une réserve pour ne pas passer sous le menu du bas
     (mettre la réserve sur le chat entier le ferait déborder → barre à droite). */
  .scroll-area.scroll-area-chat { padding-bottom: 0; }
  .assistant-fullpage .chat-composer { padding-bottom: 74px; }

  /* (le défilement horizontal des onglets vit dans la règle de base : il doit
     valoir aussi sur tablette, où les onglets débordaient sans recours) */

  /* Chat en grand : sur mobile, plein écran (les marges et coins arrondis
     du bureau gaspillent une place précieuse sur un petit écran) */
  .chat-shell.chat-fullscreen {
    inset: 0; border-radius: 0; border: none;
  }

  /* Bouton « Installer l'app » : au-dessus de la barre de navigation basse */
  #pwa-install { bottom: 84px !important; }

  /* Pages pleine largeur : sur un écran étroit, les marges latérales volent
     de la place au contenu. Les cartes débordent de la gouttière de la page
     grâce à des marges négatives et ne laissent qu'un filet de 4 px de chaque
     côté — juste assez pour que la fine bordure se détache. Le reste
     (titres, onglets, tuiles de KPI) garde la gouttière complète. */
  .page { padding: 20px 16px; }
  .page .card,
  .page .prof-chat-col > .chat-shell {
    /* La largeur explicite fonctionne dans tous les contextes (bloc, grille
       et colonne flex, où l'étirement ne s'applique pas aux marges négatives) */
    width: calc(100% + 24px);
    margin-left: -12px; margin-right: -12px;
    border: 1px solid var(--border);
    border-radius: 10px; box-shadow: none;
  }
  /* Le contenu des cartes respire sans gaspiller la largeur gagnée */
  .page .panel { padding: 18px 16px; }

  /* Les compteurs restent dans leur case de grille (deux par ligne). La grille
     déborde de la gouttière (marges négatives) pour que ses bords s'alignent
     avec les cartes pleine largeur du dessous. */
  .home-grid { margin-left: -12px; margin-right: -12px; }
  .home-grid .card { width: auto; margin-left: 0; margin-right: 0; padding: 16px; }
  .home-grid .stat-val { font-size: 26px; }

  /* Accueil : la barre latérale étant masquée, le logo prend sa place en tête */
  .home-mlogo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
  .home-mlogo img { height: 38px; width: auto; }

  /* Résidents : la liste empilée remplace le tableau à 6 colonnes.
     Le conteneur s'efface (fond et bordure) pour laisser chaque résident
     former sa propre petite carte, légèrement détachée des voisines. */
  .res-tablewrap { display: none; }
  /* `.page .card` étant plus spécifique, l'override doit l'être aussi */
  .page .card.res-mlist {
    display: flex; flex-direction: column; gap: 10px;
    padding: 0; overflow: visible;
    background: transparent; border: none; border-radius: 0;
  }
  /* Titre et bouton l'un sous l'autre : côte à côte, le sous-titre
     se retrouvait écrasé sur trois lignes */
  .res-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .res-toolbar .btn { justify-content: center; }

  /* ── Modales de configuration (wizard d'ajout, réglages…) ──
     Sur un téléphone, l'en-tête et le pied de page ne tiennent pas sur une
     ligne : les points de progression et les boutons passaient hors écran. */
  .cfg-modal-backdrop { padding: 12px; }
  /* Le wizard occupe tout l'écran : 8 étapes de formulaire ont besoin de place */
  .cfg-modal-lg { width: 100%; max-width: 100%; height: 100%; max-height: 100%; }

  /* En-tête : titre et croix sur la première ligne, progression en dessous
     (`display: contents` sort les deux enfants du conteneur de droite pour
     qu'ils se placent librement dans l'en-tête). */
  .cfg-modal-head { flex-wrap: wrap; padding: 16px; }
  .cfg-head-right { display: contents; }
  .cfg-modal-head > div:first-child { flex: 1; min-width: 0; }
  .cfg-modal-head .drawer-close { order: 2; flex-shrink: 0; }
  .cfg-modal-head .cfg-progress { order: 3; flex: 1 1 100%; margin-top: 12px; }
  .cfg-modal-head .cfg-dot { flex: 1; width: auto; }

  .cfg-modal-body { padding: 18px 16px; }
  .cfg-row.two { grid-template-columns: 1fr; }

  /* Pied de page : le message d'aide passe au-dessus, les deux actions
     principales se partagent une ligne, le brouillon prend la sienne. */
  .cfg-modal-actions { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .cfg-actions-hint { order: -1; width: 100%; margin: 0; text-align: center; }
  .cfg-actions-manque { order: -1; width: 100%; margin: 0; justify-content: center; }
  .cfg-modal-actions > .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; }
  .cfg-draft-btn, .cfg-actions-hint + .cfg-draft-btn { order: 3; flex: 1 1 100%; margin-left: 0; }

  /* En-têtes de graphiques : le titre au-dessus, le sélecteur de période
     en dessous (côte à côte, ils s'écrasaient mutuellement) */
  .calls-evo .panel-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .calls-evo-seg, .chart-period {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .calls-evo-seg::-webkit-scrollbar, .chart-period::-webkit-scrollbar { display: none; }
  .calls-evo-seg button, .chart-period-btn { white-space: nowrap; flex-shrink: 0; }
}


/* ═══════════════ Refresh moderne — contraste & couleur ═══════════════ */
.card { box-shadow: var(--shadow-md); transition: box-shadow 0.16s ease, transform 0.12s ease, border-color 0.16s ease; }
.home-grid > .card:hover, .home-kpi-ribbon > .card:hover, .home-kpis > .card:hover, .home-fc-kpis > .card:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--border-strong);
}
.section-title { color: var(--text-2); }
.stat-val, .mini-stat-val { color: var(--text); }
.stat-ic, .mini-stat-ic {
  background: color-mix(in oklch, var(--chip, var(--accent)) 16%, #fff);
  color: color-mix(in oklch, var(--chip, var(--accent)) 82%, #000);
}
.home-grid > *:nth-child(4n+1), .home-kpi-ribbon > *:nth-child(4n+1), .home-fc-kpis > *:nth-child(4n+1),
.home-compact .home-kpi-ribbon > *:nth-child(4n+1), .home-kpis > *:nth-child(2n+1) { --chip: var(--c-teal); }
.home-grid > *:nth-child(4n+2), .home-kpi-ribbon > *:nth-child(4n+2), .home-fc-kpis > *:nth-child(4n+2),
.home-compact .home-kpi-ribbon > *:nth-child(4n+2), .home-kpis > *:nth-child(2n+2) { --chip: var(--c-blue); }
.home-grid > *:nth-child(4n+3), .home-kpi-ribbon > *:nth-child(4n+3), .home-fc-kpis > *:nth-child(4n+3),
.home-compact .home-kpi-ribbon > *:nth-child(4n+3) { --chip: var(--c-amber); }
.home-grid > *:nth-child(4n+4), .home-kpi-ribbon > *:nth-child(4n+4), .home-fc-kpis > *:nth-child(4n+4),
.home-compact .home-kpi-ribbon > *:nth-child(4n+4) { --chip: var(--c-violet); }
/* Boutons laissés dans leur style d'origine (plat, sans dégradé) — l'override
   du relooking a été retiré à la demande de l'utilisateur. */
.topbar { box-shadow: var(--shadow-sm); }

/* ═══════════════ Ambiances de fond (Paramètres › Apparence) ═══════════════ */
.app-shell .scroll-area { background: var(--canvas, transparent); }
.bg-ivoire  { --canvas: #fafaf7; }
.bg-sable   { --canvas: linear-gradient(168deg, #f3f1ea 0%, #e7e4d9 100%); }
.bg-ciel    { --canvas: linear-gradient(168deg, #eef4fb 0%, #dae7f4 100%); }
.bg-azur    { --canvas: linear-gradient(168deg, #e1ecf8 0%, #c9dcf1 100%); }
.bg-brume   { --canvas: linear-gradient(168deg, #e9f3f1 0%, #d1e6e2 100%); }
.bg-sauge   { --canvas: linear-gradient(168deg, #eef4ee 0%, #d8e7db 100%); }
.bg-lavande { --canvas: linear-gradient(168deg, #f0eef9 0%, #ddd5f0 100%); }
.bg-ardoise { --canvas: linear-gradient(168deg, #e5e9f1 0%, #ccd5e3 100%); }

/* Sélecteur d'ambiance */
.bg-swatch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bg-swatch {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  cursor: pointer; text-align: center;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease;
}
.bg-swatch:hover { border-color: var(--border-strong); }
.bg-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.bg-swatch:active { transform: scale(0.98); }
.bg-swatch-chip { height: 46px; border-radius: 8px; border: 1px solid var(--border); }
.bg-swatch-name { font-size: 12px; font-weight: 600; color: var(--text-2); }
.bg-swatch-check {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.sw-ivoire  { background: #fafaf7; }
.sw-sable   { background: linear-gradient(168deg, #f3f1ea, #e7e4d9); }
.sw-ciel    { background: linear-gradient(168deg, #eef4fb, #dae7f4); }
.sw-azur    { background: linear-gradient(168deg, #e1ecf8, #c9dcf1); }
.sw-brume   { background: linear-gradient(168deg, #e9f3f1, #d1e6e2); }
.sw-sauge   { background: linear-gradient(168deg, #eef4ee, #d8e7db); }
.sw-lavande { background: linear-gradient(168deg, #f0eef9, #ddd5f0); }
.sw-ardoise { background: linear-gradient(168deg, #e5e9f1, #ccd5e3); }

/* Onglets de fiche résident : segmented control léger */
.page-profile .prof-tabs {
  gap: 3px; border-bottom: none; background: color-mix(in oklch, var(--surface-2) 60%, transparent);
  padding: 3px; border-radius: 10px; border: 1px solid var(--border);
  margin-bottom: 18px; align-self: flex-start; max-width: 100%;
}
.page-profile .prof-tab {
  padding: 7px 13px; border-radius: 8px; border-bottom: none; margin-bottom: 0;
  font-size: 13px; color: var(--text-2);
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.page-profile .prof-tab:hover { color: var(--text); background: color-mix(in oklch, var(--surface) 45%, transparent); }
.page-profile .prof-tab.active {
  background: var(--surface); color: var(--accent-dark);
  box-shadow: 0 1px 2px rgba(28,28,26,0.06); border-bottom: none;
}
.page-profile .prof-tab.active svg { opacity: 1; color: var(--accent); }

/* ── Consentement à l'enregistrement sonore (fiche résident → configuration) ──
   Carte volontairement sobre : l'état doit se lire d'un coup d'œil, et
   l'activation passer par une confirmation explicite. */
.cons-etat {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  color: var(--text-3); background: var(--surface-2);
}
.cons-etat-oui {
  color: var(--accent-dark);
  background: color-mix(in oklch, var(--accent) 16%, var(--surface));
}
.cons-trace {
  font-size: 12.5px; color: var(--text-3); margin: 0 0 14px;
  padding-left: 11px; border-left: 2px solid var(--border);
}
.cons-confirm {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.cons-confirm-tx { font-size: 12.5px; line-height: 1.55; color: var(--text-2); margin: 0 0 12px; }
.cons-confirm-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Configuration des appels : une carte, plusieurs volets ──────────────
   Les quatre volets décrivent le même objet ; des filets les distinguent
   sans multiplier les en-têtes ni les marges. */
.cfg-section + .cfg-section {
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--border);
}
.cfg-section-titre {
  margin: 0 0 14px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3);
}
/* Phrase d'explication sous un titre de section, avant les champs. */
.cfg-section-aide {
  margin: -4px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-2);
}
/* Commandes d'édition logées dans l'en-tête de la carte. */
.cfg-live-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Rappel des actions en pied de formulaire, aligné à droite comme en tête. */
.cfg-live-pied {
  display: flex; justify-content: flex-end;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
}
.cfg-live-hint-bloc {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 18px; padding: 9px 12px;
  background: var(--accent-soft); color: var(--accent-dark);
  border-radius: var(--radius-sm); font-size: 12.5px;
}

/* Questions fréquentes : liste sans limite de paires question/réponse. */
.cfg-qr-liste { display: flex; flex-direction: column; gap: 12px; }
/* Question et réponse côte à côte, la corbeille en bout de ligne. */
.cfg-qr-ligne {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end;
}
.cfg-qr-ligne .cfg-bloc-large { grid-column: auto; }
.cfg-qr-retirer { padding: 8px; color: var(--danger); }
.cfg-qr-retirer:hover { background: var(--danger-soft); }
.cfg-qr-ajouter { align-self: flex-start; gap: 6px; }
/* Hors édition : la réponse est décalée sous la question, comme un dialogue. */
.cfg-qr-lu {
  padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 1.55;
}
.cfg-qr-q { color: var(--text-2); font-weight: 600; }
.cfg-qr-r {
  margin-top: 6px; padding-left: 10px; color: var(--text);
  border-left: 2px solid var(--accent-soft); white-space: pre-wrap; word-break: break-word;
}

/* Espacement de la carte de consentement.
   `.cfg-live` ne gère l'écart qu'entre ses propres enfants : la carte de
   consentement, qui lui est sœur, doit poser sa propre marge basse.
   Et `.cfg-card-desc` est défini deux fois dans cette feuille — la seconde
   définition annule la marge basse, d'où le bouton collé au texte. */
.cons-carte { margin-bottom: 16px; }
/* Meme marge que le consentement : dans .cfg-verrou chaque carte porte
   son propre espacement, le conteneur n'en met aucun. */
.planif-carte { margin-bottom: 16px; }

/* Consentement et appels programmes cote a cote sur grand ecran : deux
   reglages courts qui occupaient toute la largeur chacun, et repoussaient la
   configuration sous la ligne de flottaison. La gouttiere remplace les marges
   des cartes, sinon l'espacement doublerait. En dessous de 1100 px on empile —
   deux colonnes y deviendraient illisibles. */
.cfg-duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: start; margin-bottom: 16px;
}
.cfg-duo > .card { margin-bottom: 0; }
@media (max-width: 1100px) {
  .cfg-duo { grid-template-columns: 1fr; }
}
.cons-carte .cfg-card-desc { margin: 0 0 14px; }

/* Onglet Configuration, lecture allégée (12/09/2026) : bandeau des deux
   réglages du haut, sommaire collant, lignes libellé | valeur sans boîte. */
.cfg-haut { margin-bottom: 16px; }
.cfg-bandeau { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.cfg-tuile { display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; background: var(--surface); font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; min-width: 0; box-shadow: var(--shadow-sm); }
.cfg-tuile:hover { border-color: var(--border-strong); }
.cfg-tuile.on { border-color: var(--accent); background: var(--accent-soft); }
.cfg-tuile-pastille { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.cfg-tuile-pastille.ok { background: var(--online, oklch(0.62 0.18 150)); animation: in-call-pulse 1.8s ease-in-out infinite; }
.cfg-tuile-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cfg-tuile-txt b { font-weight: 700; font-size: 14px; }
.cfg-tuile-detail { font-size: 12.5px; color: var(--text-2); }
.cfg-tuile-gris { color: var(--text-3); }
.cfg-tuile-lien { font-size: 12.5px; font-weight: 600; color: var(--accent-dark); border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 12px; white-space: nowrap; background: var(--surface); }
.cfg-tuile:hover .cfg-tuile-lien { border-color: var(--accent); }
.cfg-haut > .card { margin-bottom: 0; }
@media (max-width: 760px) { .cfg-bandeau { grid-template-columns: 1fr; } }

.cfg-lecture { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 8px 26px; margin-top: 6px; }
.cfg-sommaire { position: sticky; top: 8px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.cfg-sommaire-lien { font: inherit; font-size: 12.5px; text-align: left; color: var(--text-2); background: none; border: none; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; padding: 6px 10px; cursor: pointer; }
.cfg-sommaire-lien:hover { color: var(--text); }
.cfg-sommaire-lien.on { color: var(--accent-dark); font-weight: 600; border-left-color: var(--accent-dark); background: var(--accent-soft); }
.cfg-contenu { min-width: 0; }
/* L aide des deux onglets d etat, dans le panneau de configuration seulement : de l air au-dessus et en dessous. */
.cfg-live .cfg-aide { margin: 18px 0 26px; }
/* Chaque section est un bloc a part entiere : cadre, fond, coins arrondis, et de l air entre deux. */
.cfg-contenu > .cfg-section.cfg-section-lecture { gap: 8px; padding: 14px 18px 16px; margin: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.cfg-contenu > .cfg-section.cfg-section-lecture + .cfg-section-lecture { margin-top: 14px; }
.cfg-section-lecture > .cfg-section-titre { color: var(--text); margin-bottom: 8px; }
.cfg-lignes { display: flex; flex-direction: column; }
.cfg-ligne { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 6px 16px; padding: 5px 0; align-items: start; }
.cfg-ligne-lib { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 11px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.cfg-ligne-lib > span:first-child { line-height: 1.35; }
.cfg-ligne-lib .cfg-copilot { float: none; margin: 0; }
.cfg-ligne-val { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cfg-val { font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
.cfg-val-coupe { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cfg-suite { align-self: flex-start; border: none; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent-dark); cursor: pointer; }
/* Onglet Agite : un champ herite de la configuration par defaut est presque blanc, un champ personnalise garde sa boite grise et ressort. */
.cfg-herite .cfg-val, .cfg-herite .cfg-puces, .cfg-herite .cfg-qr-lu { color: var(--text-2); background: var(--surface); border: 1px solid var(--border); }
/* Voix dans la configuration : lecture avec bouton d ecoute, edition avec le selecteur de la creation */
.cfg-voix-lue { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cfg-voix-lue .q-ecoute.attente svg { animation: cfg-copilot-tourne 1s linear infinite; }
.cfg-voix-lue .q-ecoute:disabled { cursor: default; }
.cfg-voix-edit { padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
.cfg-voix-edit > .cfg-field > .cfg-label { display: none; }
.cfg-voix-edit .q-chip:not(.active) { background: var(--surface); }
.cfg-puces { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
.cfg-puce { font-size: 13px; line-height: 1.45; padding: 6px 11px; border-radius: 10px; background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.cfg-section-lecture .cfg-qr-lu { padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
@media (max-width: 900px) {
  .cfg-lecture { grid-template-columns: 1fr; }
  .cfg-sommaire { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
  .cfg-sommaire-lien { border-left: none; border-radius: 999px; border: 1px solid var(--border); }
  .cfg-sommaire-lien.on { border-color: var(--accent-soft); }
  .cfg-ligne { grid-template-columns: 1fr; gap: 3px; }
}

/* Onglets dont le contenu n'est pas abouti : la pastille prévient avant le
   clic. Reprend la forme des « bientôt » de l'apaisement et du dossier, mais
   sur fond neutre — l'accent est réservé à l'onglet actif. */
.prof-tab-bientot {
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; flex-shrink: 0; margin-left: 2px;
  background: var(--surface-2); color: var(--text-3);
  border: 1px solid var(--border);
}
.prof-tab.active .prof-tab-bientot {
  background: var(--accent-soft); color: var(--accent-dark); border-color: transparent;
}

/* ── Verrou PIN sur l'onglet Configuration des appels ─────────────────────
   Même mécanique que .apais-card.vig-locked : contenu flouté et inerte,
   calque .vig-gate net par-dessus. Le pointer-events:none interdit aussi de
   basculer le consentement ou d'éditer la config sans avoir saisi le code. */
.cfg-verrou { position: relative; }
.cfg-verrou.est-verrouille { min-height: 300px; }
.cfg-verrou.est-verrouille > *:not(.vig-gate) {
  filter: blur(6px); pointer-events: none; user-select: none;
}
/* Le contenu flouté fait plus de 1000 px : un calque centré placerait le
   bouton sous la ligne de flottaison, et l'onglet s'ouvrirait sur du flou
   sans explication. On ancre donc l'invite vers le haut, visible d'emblée. */
.cfg-verrou.est-verrouille .vig-gate { justify-content: flex-start; padding-top: 96px; }

/* ── Onglet « Sujet à approfondir » : disposition « fil d'enquête » ────────
   Le fil des retours est un APERÇU (données fictives, boutons inertes) tant
   que le post-traitement de l'agent n'extrait pas les réponses. La définition
   du sujet, elle, est réelle : question_psy part dans les appels. */
.sjA-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-2);
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  padding: 10px 14px; border-radius: var(--radius-sm); margin: 0;
}
.sjA-note strong { font-weight: 600; color: var(--text); }
.sjA-note svg { flex-shrink: 0; color: var(--accent-dark); }

.sjA-colonnes { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .sjA-colonnes { grid-template-columns: 1fr; } }
.sjA-colonne { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.sj-statut {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; flex-shrink: 0;
}
.sj-attente { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); }
.sj-recu { background: color-mix(in oklch, var(--accent) 16%, var(--surface)); color: var(--accent-dark); }

.sjA-actif { border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
.sjA-q { font-size: 15px; font-weight: 600; margin: 2px 0 6px; }
.sjA-meta { font-size: 12px; color: var(--text-3); display: flex; gap: 14px; flex-wrap: wrap; }

.sjA-fil { position: relative; margin-top: 6px; padding-left: 22px; }
.sjA-fil::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border); border-radius: 2px; }
.sjA-etape { position: relative; padding: 10px 0 14px; }
.sjA-etape::before {
  content: ''; position: absolute; left: -19px; top: 16px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--surface);
}
.sjA-etape-quand { font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }
.sjA-etape-tx { font-size: 13px; line-height: 1.55; }
.sjA-etape-tx em { color: var(--text-2); }

.sjA-pied-btns { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.sjA-pied-btns .btn:disabled { opacity: 0.65; cursor: default; }

.sjA-clos-ligne {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 8px; font-size: 13px; color: var(--text);
}
.sjA-clos-ligne + .sjA-clos-ligne { border-top: 1px solid var(--border); }
.sjA-clos-tx { flex: 1; min-width: 0; }
.sjA-clos-quand { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* Sous-onglets mobile/tablette du « Sujet à approfondir » : une section à la
   fois sous 900 px, sinon tout défile et les sujets clos finissent toujours
   en bas de page. Sur PC la barre disparaît, les colonnes reprennent. */
.sjA-mobnav {
  display: none; gap: 4px;
  background: var(--surface-2); padding: 4px; border-radius: 999px;
}
.sjA-mobnav button {
  flex: 1; padding: 8px 6px; font-size: 12.5px; font-weight: 600;
  color: var(--text-3); border-radius: 999px; white-space: nowrap;
  transition: background 0.13s ease, color 0.13s ease;
}
.sjA-mobnav button.on { background: var(--surface); color: var(--accent-dark); box-shadow: var(--shadow-sm); }
@media (max-width: 900px) {
  .sjA-mobnav { display: flex; }
  .sjA-colonnes[data-mob="fil"] .sjA-sec:not(.sjA-sec-fil) { display: none; }
  .sjA-colonnes[data-mob="definir"] .sjA-sec:not(.sjA-sec-definir) { display: none; }
  .sjA-colonnes[data-mob="clos"] .sjA-sec:not(.sjA-sec-clos) { display: none; }
}

/* Fenêtre de consultation d'un sujet clos (fil complet des retours). */
button.sjA-clos-ligne { transition: background 0.13s ease; border-radius: 8px; }
button.sjA-clos-ligne:hover { background: var(--surface-2); }
.sjA-clos-ligne > svg { flex-shrink: 0; color: var(--text-3); }
.sjA-voile {
  position: fixed; inset: 0; z-index: 400; background: rgba(20,20,18,0.45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: fadeIn 0.16s ease;
}
.sjA-fenetre {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: min(620px, 100%); max-height: 82vh; overflow-y: auto; padding: 22px 24px;
}
.sjA-fenetre-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.sjA-fenetre-titre { font-size: 16px; font-weight: 700; line-height: 1.35; }
.sjA-fermer { font-size: 20px; line-height: 1; color: var(--text-3); padding: 0 4px; flex-shrink: 0; }
.sjA-fermer:hover { color: var(--text); }
.sjA-fenetre-meta { font-size: 12px; color: var(--text-3); margin-bottom: 14px; }
.sjA-fenetre-pied { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.sjA-fenetre-pied .btn:disabled { opacity: 0.65; cursor: default; }

/* ── Configuration des appels : onglets par état émotionnel ───────────────
   Un champ hérité doit se lire au premier coup d'œil comme « pas à moi » :
   c'est ce qui évite de croire qu'on a personnalisé ce qu'on n'a fait que
   consulter. */
/* Aucun padding horizontal : .panel-head n en a pas, les onglets doivent
   partir du meme bord que le titre et les sections. */
.cfg-onglets { display: flex; gap: 4px; margin-bottom: 10px; }
/* Encadre d aide, discret a dessein : un rappel, pas une alerte. Le bandeau
   d etat de la variante, lui, garde son fond colore. Sert aux onglets de
   configuration et a l introduction des appels programmes. */
.cfg-aide {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 14px; padding-left: 10px;
  border-left: 2px solid var(--accent);
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
}
.cfg-aide svg { flex: none; margin-top: 3px; color: var(--accent-dark); }
.cfg-aide b { color: var(--text); }
/* Point median : separe le nom de l onglet de son explication. Pas de point
   final aux deux lignes — ca se lit comme une legende, pas un paragraphe. */
.cfg-aide-sep { color: var(--text-3); margin: 0 5px; }
.cfg-onglet {
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); cursor: pointer; font: inherit; font-size: 13px;
}
.cfg-onglet.actif {
  border-color: var(--accent); background: var(--accent-soft); color: var(--text);
  font-weight: 500;
}
.cfg-herite .cfg-bloc-val { opacity: .55; }
.cfg-herite-badge, .cfg-perso-badge {
  margin-left: 8px; font-size: 11px; font-weight: 400; text-transform: none;
  letter-spacing: 0; opacity: .7;
}
.cfg-perso-badge { color: var(--accent-dark); opacity: 1; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); }
.cfg-perso-bascule {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); cursor: pointer; font: inherit; font-size: 11px;
  text-transform: none; letter-spacing: 0;
}
.cfg-perso-bascule:hover { border-color: var(--accent); color: var(--text); }
.cfg-perso-bascule-bloc { margin: 0 0 10px; align-self: flex-start; }
.cfg-defaut-rappel {
  margin-top: 6px; font-size: 12px; opacity: .6;
  border-left: 2px solid var(--border); padding-left: 8px;
}

/* ── Sujet a approfondir : synthese des retours ───────────────────────────
   Trois lignes etiquetees, toujours les memes : on balaie sans lire de
   prose, et le format contraint ce que la generation devra produire. */
.sjA-syn {
  background: var(--accent-soft); border-radius: 12px;
  padding: 12px 14px; margin: 14px 0;
}
.sjA-syn-titre {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent-dark); margin-bottom: 6px;
}
.sjA-syn-tx { font-size: 13.5px; line-height: 1.55; color: var(--text); }
.sjA-fil-titre {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); margin: 0 0 8px;
}

/* Assistant d'ajout d'un résident : les six étapes sont déroulées sur une seule
   page. Chaque section garde son titre, sinon le formulaire devient un mur de
   champs sans repères. */
.cfg-section { display: flex; flex-direction: column; gap: 14px; }
.cfg-section + .cfg-section { padding-top: 18px; border-top: 1px solid var(--border); }
.cfg-section-title {
  margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text-1);
}

/* Case de consentement du formulaire de création : la coche et son libellé sur
   une ligne, alignés en haut pour que le texte long reste lisible. */
.cfg-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; }
.cfg-consent input { margin-top: 2px; }
.cfg-erreur {
  margin: 0 24px 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  background: var(--danger-bg, #fdf1f1); color: var(--danger, #9a3b3b);
}

/* Pré-remplissage depuis un document : le bandeau se distingue du formulaire
   lui-même, pour qu'on voie qu'il propose et ne remplit pas. */
.cfg-import { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.cfg-import-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cfg-import-titre { font-size: 13px; font-weight: 700; }
.cfg-import-corps { display: flex; flex-direction: column; gap: 10px; }
.cfg-extraction { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.cfg-photo { display: flex; flex-direction: column; gap: 6px; }
/* Ecran source, temps 1 : les deux portes d'entree. */
.cfg-portes-body { align-items: center; text-align: center; gap: 10px; padding-top: 26px; padding-bottom: 26px; }
.cfg-portes-question { margin: 0; font-size: 16px; font-weight: 600; }
.cfg-portes-body > .cfg-hint { max-width: 480px; }
.cfg-portes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 540px; margin-top: 8px; }
.cfg-porte { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 18px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); cursor: pointer; font: inherit; color: inherit; text-align: center; transition: border-color 0.15s, background 0.15s; }
.cfg-porte:hover { border-color: var(--accent); background: var(--accent-soft); }
.cfg-porte-ic { color: var(--accent-dark); }
.cfg-porte-titre { font-size: 14px; font-weight: 600; }
.cfg-lien-main { margin-top: 14px; border: none; background: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.cfg-lien-main:hover { color: var(--text); }
/* Ecran source, temps 2 : la page d'ecriture. */
.cfg-ecriture-body { gap: 10px; }
.cfg-retour { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: none; background: none; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-3); padding: 0; }
.cfg-retour:hover { color: var(--text); }
.cfg-ecriture { flex: 1; min-height: 300px; border: none; outline: none; resize: none; background: transparent; font: inherit; font-size: 14.5px; line-height: 1.65; color: var(--text); padding: 4px 2px; }
.cfg-ecriture::placeholder { color: var(--text-3); }
.cfg-note-rgpd { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 11.5px; color: var(--text-3); text-align: left; max-width: 320px; }
/* Ecran d'ecriture en deux encadres : la personne, puis le personnage de
   Livana. Les deux sont obligatoires. */
.cfg-zones-body { gap: 14px; }
.cfg-zone { border: 1px solid var(--border-strong); border-radius: 14px; padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.cfg-zone:focus-within { border-color: var(--accent); }
.cfg-zone-titre { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.cfg-zone-titre svg { color: var(--accent-dark); flex-shrink: 0; }
.cfg-zone-hint { margin: 0; font-size: 12px; color: var(--text-3); line-height: 1.45; }
.cfg-zone textarea { flex: 1; border: none; outline: none; resize: none; background: transparent; font: inherit; font-size: 14px; line-height: 1.6; color: var(--text); padding: 2px 0; min-height: 110px; }
.cfg-zone textarea::placeholder { color: var(--text-3); }
.cfg-zone-personne { flex: 1.4; }
/* Zone de dépose des documents : glisser-déposer, PDF, photo. */
.cfg-depose { border: 1.5px dashed var(--border-strong); border-radius: 14px; padding: 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--text-3); transition: border-color 0.15s, background 0.15s; }
.cfg-depose.survol { border-color: var(--accent); background: var(--accent-soft); }
.cfg-depose .cfg-photo-boutons { justify-content: center; margin-top: 0; }
.cfg-depose .cfg-webcam { width: 100%; text-align: left; }
/* Une puce par document joint. */
.cfg-pj-rangee { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.cfg-pj { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 9px 5px 10px; font-size: 12px; font-weight: 600; background: var(--bg); color: var(--text); }
.cfg-pj svg:first-child { color: var(--accent-dark); flex-shrink: 0; }
.cfg-pj-x { display: inline-flex; align-items: center; border: none; background: none; cursor: pointer; color: var(--text-3); padding: 0; }
.cfg-pj-x:hover { color: var(--text); }
/* Voile plein écran pendant qu'un fichier survole la fenêtre. Aucun
   pointer-events : le glisser-déposer traverse le voile jusqu'au fond. */
.cfg-depose-voile { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: color-mix(in oklch, var(--accent) 26%, transparent); backdrop-filter: blur(2px); pointer-events: none; }
.cfg-depose-voile-carte { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 48px; border: 2px dashed var(--accent-dark); border-radius: 20px; background: var(--surface); color: var(--accent-dark); box-shadow: 0 16px 44px rgb(0 0 0 / 0.18); }
.cfg-depose-voile-titre { font-size: 19px; font-weight: 700; color: var(--text); }
/* Échec d'analyse : le message et la porte de sortie vers le formulaire. */
.cfg-erreur-source { margin: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Puce de voix avec son bouton d'écoute DANS la bulle, à gauche du texte. */
.q-chip-voix { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.q-chip-voix.inactif { cursor: default; color: var(--text-3); }
.q-chip-voix.inactif:hover { border-color: var(--border); }
.q-ecoute { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: -4px; border-radius: 50%; border: none; background: var(--accent-soft); color: var(--accent-dark); cursor: pointer; padding: 0; flex-shrink: 0; transition: background 0.15s, color 0.15s; }
.q-ecoute:hover { background: var(--accent); color: #fff; }
.q-ecoute.on { background: var(--accent-dark); color: #fff; }
/* Voile d'attente pendant l'analyse : couvre toute la modale, bloque les
   clics, et disparaît dès la réponse du serveur. Le « 15 secondes » n'est
   qu'un avertissement, pas une durée tenue. */
.cfg-analyse-voile { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: color-mix(in oklch, var(--surface) 55%, transparent); backdrop-filter: blur(3px); }
.cfg-analyse-carte { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 30px 42px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 16px 44px rgb(0 0 0 / 0.14); }
.cfg-analyse-titre { font-size: 16px; font-weight: 700; }
.cfg-analyse-sous { font-size: 12.5px; color: var(--text-3); }
/* Le document dont les lignes s'écrivent en boucle. */
.cfg-analyse-doc { width: 46px; height: 58px; border: 2px solid var(--accent-dark); border-radius: 8px; position: relative; overflow: hidden; background: var(--surface); }
.cfg-analyse-doc i { position: absolute; left: 8px; right: 8px; height: 4px; border-radius: 2px; background: var(--accent-soft); }
.cfg-analyse-doc i::after { content: ''; position: absolute; inset: 0; border-radius: 2px; background: var(--accent-dark); transform-origin: left; animation: cfgAnalyseEcrit 2.4s ease-in-out infinite; }
.cfg-analyse-doc i:nth-child(1) { top: 10px; }
.cfg-analyse-doc i:nth-child(2) { top: 22px; }
.cfg-analyse-doc i:nth-child(2)::after { animation-delay: 0.4s; }
.cfg-analyse-doc i:nth-child(3) { top: 34px; width: 70%; }
.cfg-analyse-doc i:nth-child(3)::after { animation-delay: 0.8s; }
@keyframes cfgAnalyseEcrit { 0% { transform: scaleX(0); } 45%, 70% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
/* Les étapes qui défilent toutes les 3 secondes. */
.cfg-analyse-etapes { position: relative; height: 17px; width: 240px; overflow: hidden; }
.cfg-analyse-etapes span { position: absolute; inset: 0; font-size: 12.5px; color: var(--accent-dark); font-weight: 600; opacity: 0; animation: cfgAnalyseEtape 9s infinite; }
.cfg-analyse-etapes span:nth-child(2) { animation-delay: 3s; }
.cfg-analyse-etapes span:nth-child(3) { animation-delay: 6s; }
@keyframes cfgAnalyseEtape { 0%, 5% { opacity: 0; transform: translateY(8px); } 12%, 28% { opacity: 1; transform: translateY(0); } 33%, 100% { opacity: 0; transform: translateY(-8px); } }
/* Le rappel de relecture, en tete du formulaire pre-rempli. */
.cfg-relecture { border: 1px solid var(--accent); border-left-width: 3px; border-radius: 12px; padding: 12px 14px; background: var(--accent-soft); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cfg-relecture p { margin: 0; }

.cfg-photo img { max-height: 200px; width: auto; border-radius: 10px; border: 1px solid var(--border); object-fit: contain; }
.cfg-photo-boutons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.cfg-photo-boutons .btn { cursor: pointer; }
.cfg-webcam { display: flex; flex-direction: column; gap: 10px; }
.cfg-webcam video { width: 100%; max-height: 360px; border-radius: 12px; border: 1px solid var(--border); background: #000; object-fit: contain; }
.cfg-photo-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cfg-photo-vide { flex: 1; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--text-3); font-size: 13px; }

/* ── Comptes individuels : inscription, rattachement, attente ────────
   Écrans du parcours d'une psychologue qui crée son compte puis demande
   l'accès à un établissement (js/features/auth/Compte.jsx). Ils reprennent
   la coquille de la page de connexion — mêmes classes `login-*`. */
.auth-bas { text-align: center; font-size: 13px; color: var(--text-2); margin-top: 18px; }
.auth-lien { border: none; background: none; padding: 0; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--accent-dark); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.auth-lien:hover { color: var(--text); }

/* Attente : l'icône, puis le parcours en trois étapes. Montrer où l'on en
   est répond à la seule question qu'on se pose devant une attente — est-ce
   que ça avance, ou est-ce cassé ? */
.att-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--warn-soft);
  color: var(--warn); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.att-etapes { list-style: none; padding: 0; margin: 22px 0 0; }
.att-etapes li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; font-size: 13.5px; }
.att-pastille { width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.att-pastille.fait { background: var(--accent-soft); color: var(--accent-dark); }
.att-pastille.encours { background: var(--warn-soft); color: var(--warn); }
.att-pastille.apres { background: var(--bg); color: var(--text-3); border: 1px solid var(--border); }
.att-apres { color: var(--text-3); }
.att-encart { background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 20px 0 16px; }

/* Mes établissements : la liste sert aussi de sélecteur quand plusieurs
   rattachements sont validés — choisir où l'on travaille est le même geste. */
.etab-liste { margin-top: 22px; }
.etab-ligne { display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  border: 1px solid var(--border); border-radius: 13px; margin-bottom: 9px; background: var(--surface); }
.etab-ligne.ouvrable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.etab-ligne.ouvrable:hover { border-color: var(--accent); background: var(--accent-soft); }
.etab-nom { flex: 1; font-size: 14px; font-weight: 600; }
.etab-etat { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.etab-etat.ok { color: var(--accent-dark); background: var(--accent-soft); }
.etab-etat.attente { color: var(--warn); background: var(--warn-soft); }
.etab-etat.refus { color: var(--text-3); background: var(--bg); border: 1px solid var(--border); }
.etab-ajout { margin-top: 14px; border-style: dashed; }

/* ══ Sélecteur d'établissement (rail) + page « Mes établissements » ══ */
/* Le sélecteur vit dans le rail, sous le logo : présent sur toutes les
   pages sans coûter de hauteur au contenu. Masqué pour un compte
   d'établissement, qui n'en a qu'un (le composant ne se rend pas). */

.sb-etab-wrap { position: relative; padding: 0 8px 14px; }
.sb-etab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; padding: 7px 2px 5px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color 0.14s ease, background 0.14s ease;
}
.sb-etab-haut { display: flex; align-items: center; gap: 3px; }
.sb-etab:hover, .sb-etab.ouvert { border-color: var(--border-strong); background: var(--bg); }
.sb-etab-past {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0;
}
.sb-etab-chev { color: var(--text-3); display: inline-flex; }

/* Le panneau s'ouvre À DROITE du rail : celui-ci fait 76 px, la liste n'y
   tiendrait pas. `z-index` au-dessus du contenu, pas des modales. */
.sb-etab-pop {
  position: absolute; left: calc(100% + 2px); top: 0; z-index: 60;
  width: 288px; padding: 6px 0 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 15px; box-shadow: var(--shadow-lg, 0 16px 40px rgb(0 0 0 / 0.14));
  animation: pop-in 0.13s ease-out;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sb-etab-tete {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); padding: 7px 14px 6px;
}
.sb-etab-ligne {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 14px; text-align: left; transition: background 0.12s ease;
}
.sb-etab-ligne:hover:not(.inerte) { background: var(--bg); }
.sb-etab-ligne.inerte { cursor: default; opacity: 0.72; }
.sb-etab-mini {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
}
.sb-etab-ligne.actif .sb-etab-mini { background: var(--accent-soft); border-color: transparent; color: var(--accent-dark); }
.sb-etab-nom {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-etab-coche { color: var(--accent-dark); display: inline-flex; flex-shrink: 0; }
.sb-etab-etat {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn); white-space: nowrap; flex-shrink: 0;
}
.sb-etab-sep { height: 1px; background: var(--border); margin: 6px 0; }
.sb-etab-gerer {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; text-align: left;
  font-size: 13.5px; font-weight: 600; color: var(--accent-dark);
  transition: background 0.12s ease;
}
.sb-etab-gerer:hover { background: var(--accent-soft); }
.sb-etab-plus {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  border: 1px dashed var(--border-strong);
  display: flex; align-items: center; justify-content: center;
}

/* Sous 720 px le rail disparaît : SON sélecteur suit. Celui de l'accueil
   prend le relais — il vit dans `.home-mlogo`, que le CSS n'affiche
   justement qu'en dessous de ce seuil. */
@media (max-width: 720px) { .sb-etab-wrap.au-rail { display: none; } }

/* ── Variante « en-tête » : en haut de l'accueil, face au logo ─────── */
/* Elle n'a pas besoin d'être masquée en desktop : son parent
   `.home-mlogo` est déjà en `display: none` au-delà de 720 px. */
.sb-etab-wrap.en-tete { padding: 0; flex-shrink: 0; }
.sb-etab-wrap.en-tete .sb-etab { width: auto; flex-direction: row; gap: 8px; padding: 6px 10px 6px 7px; }
.sb-etab-libelle {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  max-width: 34vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Le panneau s'ouvre SOUS le bouton et calé à droite : à cet endroit
   l'ouvrir vers la droite le ferait sortir de l'écran. */
.sb-etab-wrap.en-tete .sb-etab-pop {
  left: auto; right: 0; top: calc(100% + 6px);
  width: min(288px, calc(100vw - 32px));
}

/* ── La page ─────────────────────────────────────────────────────── */
.page-etabs { max-width: 620px; }
.pe-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.pe-tab {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 11px 16px; font-size: 13.5px; font-weight: 600; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.pe-tab:hover { color: var(--text); }
.pe-tab.active { color: var(--accent-dark); border-bottom-color: var(--accent); }
.pe-intro { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 0 0 16px; }
.pe-liste { display: flex; flex-direction: column; gap: 9px; }
.pe-ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.pe-ligne.ouvrable:not(.actif) { cursor: pointer; }
.pe-ligne.ouvrable:not(.actif):hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm, 0 2px 8px rgb(0 0 0 / 0.05)); }
.pe-ligne.actif { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pe-past {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.pe-ligne.actif .pe-past { background: var(--accent-soft); border-color: transparent; color: var(--accent-dark); }
.pe-txt { flex: 1; min-width: 0; }
.pe-nom { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.pe-sous { display: block; font-size: 12px; color: var(--text-3); margin-top: 1px; }
.pe-etat { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pe-etat.ok { color: var(--accent-dark); background: var(--accent-soft); }
.pe-etat.attente { color: var(--warn); background: var(--warn-soft); }
.pe-etat.refus { color: var(--text-3); background: var(--bg); border: 1px solid var(--border); }

/* ── Page « Accès » de l'espace direction (features/acces/Acces.jsx) ──
   Même grammaire que « Mes établissements » ci-dessus : une ligne par
   compte, pastille d'initiales, état à droite. */
.page-acces { max-width: 760px; }
.acc-bloc { margin-bottom: 18px; }
.acc-bloc-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.acc-bloc-h h3 { font-size: 14px; font-weight: 700; margin: 0; }
.acc-bloc-h .eyebrow { margin-left: auto; }
.acc-ligne {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); margin-bottom: 8px;
}
.acc-ligne.attente { border-color: color-mix(in oklch, var(--warn) 45%, var(--border)); background: color-mix(in oklch, var(--warn) 6%, var(--surface)); }
.acc-ligne.passe { opacity: 0.62; }
.acc-past {
  width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark);
  font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.acc-txt { flex: 1; min-width: 0; }
.acc-nom { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.acc-sous { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; overflow-wrap: anywhere; }
.acc-actions { display: flex; gap: 8px; flex-shrink: 0; }
.acc-confirm {
  margin: -2px 0 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-2);
}
.acc-confirm b { color: var(--text); }
.acc-confirm .acc-actions { margin-left: auto; }
.acc-note, .acc-vide {
  font-size: 12.5px; color: var(--text-2); line-height: 1.6;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px;
}
.acc-vide { text-align: center; color: var(--text-3); padding: 26px 16px; }
.acc-erreur { font-size: 12.5px; color: var(--danger, #b3453f); margin-bottom: 12px; }
.btn-danger-ghost { color: var(--danger, #b3453f); border: 1px solid color-mix(in oklch, var(--danger, #b3453f) 40%, var(--border)); background: var(--surface); }
.btn-danger-ghost:hover { background: color-mix(in oklch, var(--danger, #b3453f) 8%, var(--surface)); }
@media (max-width: 720px) {
  .acc-ligne { flex-wrap: wrap; }
  .acc-actions { width: 100%; justify-content: flex-end; }
}
.acc-journal { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; }

/* ── Page « Journal des accès » (features/journal/Journal.jsx) : la grammaire de la page Accès,
   l'heure à la place des initiales. */
.jn-intro { margin-bottom: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.jn-actualiser { display: inline-flex; align-items: center; gap: 6px; }
.jn-heure { width: 46px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.jn-ligne .pe-etat { flex-shrink: 0; }
.jn-suite { display: flex; justify-content: center; margin: 4px 0 18px; }
.jn-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.jn-export { margin: -6px 0 18px; }
.jn-export-champs { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.jn-export-champs label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.jn-export-champs input { font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.jn-export-note { width: 100%; font-size: 12px; color: var(--text-3); }
.jn-export-erreur { width: 100%; margin: 0; }
/* Interventions de l'équipe Livana : une carte chacune, au-dessus des accès qu'elles expliquent. */
.jn-inter { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 8px; }
.jn-inter-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jn-inter-num { font-size: 13.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.jn-inter-cat { margin-top: 0; }
.jn-inter-h .pe-etat { margin-left: auto; }
.jn-inter-objet { margin: 6px 0 0; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.jn-inter-cr { margin: 4px 0 0; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; white-space: pre-line; }
.jn-inter-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--text-3); }
.jn-vue { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; font-size: 13px; color: var(--text-2); }
.jn-vue select { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); max-width: 100%; }
.jn-sous-titre { font-size: 14px; font-weight: 700; margin: 4px 0 10px; }
@media (max-width: 720px) {
  .jn-ligne { flex-wrap: nowrap; align-items: flex-start; }
  .jn-ligne .pe-etat { display: none; }
}
.pe-form { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pe-form .cfg-field { width: 100%; }
.pe-envoye {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 12px 14px; margin-bottom: 16px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: 13px; line-height: 1.55;
}
.pe-envoye svg { flex-shrink: 0; margin-top: 2px; }

/* ══ Debriefs dictés par l'équipe soignante ══════════════════════════ */
/* Un debrief n'est pas un appel : pas d'avatar de résident, pas d'humeur.
   La date et la fraîcheur sont l'information principale. */

.deb-liste { display: flex; flex-direction: column; gap: 11px; }
.deb-item { padding: 14px 16px; }
.deb-item.neuf { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.deb-tete {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; padding: 0; background: none;
}
.deb-point {
  width: 7px; height: 7px; border-radius: 50%; background: var(--warn);
  flex-shrink: 0;
}
.deb-ic {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
}
.deb-titre { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.deb-duree { font-weight: 400; color: var(--text-3); }
/* Le bouton qui ouvre la dictee : la grammaire de « Afficher plus » de
   l'accueil — pointille, pleine largeur sous la boite de synthese. C'est
   le geste principal de la carte, il merite l'affordance la plus franche.
   Absent quand le contenu est verrouille : le flou cliquable suffit. */
.deb-afficher {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: calc(100% - 42px); margin: 11px 0 0 42px; padding: 9px;
  border: 1px dashed var(--border-strong); border-radius: 12px;
  font-size: 12.5px; font-weight: 600; color: var(--accent-dark);
  background: var(--surface);
  transition: background 0.13s ease, border-color 0.13s ease;
}
.deb-afficher:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.deb-aff-chev { display: inline-flex; transition: transform 0.15s ease; }
.deb-aff-chev.ouvert { transform: rotate(180deg); }
.deb-resume { font-size: 13px; line-height: 1.6; color: var(--text-2); margin: 0; }
.deb-resume.locked { filter: blur(5px); user-select: none; }
.is-unlocked .deb-resume.locked { filter: none; user-select: auto; }
/* La synthese dans sa boite : fond creuse, pastille d'auteur. */
.deb-syn {
  margin: 9px 0 0 42px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 13px; padding: 10px 14px;
}
.deb-syn-puce {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent-dark); margin-bottom: 6px;
}
/* La pastille de non-lus du rail, en couleur d'alerte comme en mobile :
   un debrief non lu ATTEND, la ou l'accent (vert) dit « en cours ». Ciblee
   par le data-tip du poste — la classe .sb-item-badge reste generique pour
   un eventuel badge d'appels en cours. */
.sb-item[data-tip^="Debriefs"] .sb-item-badge { background: var(--warn); }

.deb-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark); flex-shrink: 0;
}
/* La parole, entre guillemets : le grand guillemet Cormorant (police
   d'affichage de la marque), l'italique, la signature. C'est le texte qui
   fait foi — la synthese n'en est que le raccourci. */
.deb-verb { position: relative; margin: 13px 0 2px 42px; padding: 2px 0 0 26px; }
.deb-quote {
  position: absolute; left: 0; top: -8px;
  font-family: 'Cormorant Garamond', serif; font-size: 44px; line-height: 1;
  color: var(--accent); opacity: 0.55;
}
.deb-verbatim {
  font-size: 13.5px; line-height: 1.7; color: var(--text-2);
  font-style: italic; margin: 0; white-space: pre-wrap;
}
.deb-sig { font-size: 11.5px; color: var(--text-3); margin: 7px 0 0; text-align: right; }
.deb-verbatim.locked { filter: blur(5px); user-select: none; }
.is-unlocked .deb-verbatim.locked { filter: none; user-select: auto; }

/* Le resume floute EST le bouton de deverrouillage, comme sur les appels
   recents : on clique ce qu'on veut lire. `position: relative` porte la
   pastille centree. */
.deb-corps { position: relative; }
.deb-corps.verrouille { cursor: pointer; }

.deb-vide { text-align: center; padding: 40px 28px; }
.deb-vide-ic {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
}
.deb-vide-t { font-size: 15.5px; font-weight: 700; }
.deb-vide-p {
  font-size: 13px; color: var(--text-2); line-height: 1.6;
  margin: 7px auto 0; max-width: 430px;
}

/* ══ Menu du compte (bas du rail) ════════════════════════════════════ */
/* Remplace les quatre boutons — Données, Réglages, Quitter, avatar. Le
   déclencheur garde la grammaire des postes : l'avatar tient lieu
   d'icône, « Menu » de libellé. */

.sb-menu-wrap { position: relative; display: flex; justify-content: center; }
.sb-menu-btn {
  width: 64px; padding: 7px 2px 5px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--text-3); transition: background 0.14s ease, color 0.14s ease;
}
.sb-menu-btn:hover, .sb-menu-btn.ouvert { background: var(--surface-2, var(--bg)); color: var(--text); }
.sb-menu-btn .sb-avatar { width: 36px; height: 36px; font-size: 12.5px; }

/* Panneau à droite, ancré en BAS : le déclencheur est au pied du rail,
   ouvrir vers le bas sortirait de l'écran. */
.sb-menu-pop {
  position: absolute; left: calc(100% + 8px); bottom: 0; z-index: 60;
  width: 252px; padding: 0 0 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 15px; box-shadow: var(--shadow-lg, 0 16px 40px rgb(0 0 0 / 0.14));
  animation: pop-in 0.13s ease-out;
}
.sb-menu-id {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px 11px; border-bottom: 1px solid var(--border);
  margin-bottom: 5px;
}
.sb-menu-id .sb-avatar { width: 36px; height: 36px; font-size: 12.5px; flex-shrink: 0; }
.sb-menu-txt { min-width: 0; }
.sb-menu-nom {
  display: block; font-size: 13.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-menu-role {
  display: block; font-size: 11.5px; color: var(--text-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-menu-l {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 14px; text-align: left;
  font-size: 13.5px; font-weight: 600; color: var(--text);
  transition: background 0.12s ease;
}
.sb-menu-l:hover { background: var(--bg); }
.sb-menu-l svg { color: var(--text-3); flex-shrink: 0; }
.sb-menu-sep { height: 1px; background: var(--border); margin: 5px 0; }
.sb-menu-l.danger, .sb-menu-l.danger svg { color: var(--danger); }
.sb-menu-l.danger:hover { background: var(--danger-soft, var(--bg)); }

/* ── Création d'un établissement par sa direction (features/auth/Compte.jsx) ── */
/* La porte après connexion : psychologue ou direction. Deux boutons
   empilés, larges, c'est LE choix de l'écran et non un renvoi en bas de page. */
.porte-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.porte { display: flex; align-items: center; gap: 13px; padding: 14px 15px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface); text-align: left; cursor: pointer; font-family: inherit; }
.porte:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.porte-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.porte-txt { flex: 1; min-width: 0; }
.porte-txt b { display: block; font-size: 13.5px; color: var(--text); }
.porte-txt > span { display: block; font-size: 11.5px; color: var(--text-3); line-height: 1.4; margin-top: 2px; }
.porte-chev { color: var(--text-3); display: inline-flex; }

/* Demande d'accès : les sites qui portent le même e-mail de direction,
   à cocher. Une case par site, le libellé entier cliquable. */
.sites-choix { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.sites-choix label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text); }
.sites-choix label:hover { border-color: var(--border-strong); }
.sites-choix label.coche { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sites-choix input { accent-color: var(--accent-dark); width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.field-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.field-deux .field-label { white-space: nowrap; }
.auth-encart { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; line-height: 1.5; color: var(--text-2); }
.auth-encart svg { flex-shrink: 0; color: var(--accent-dark); margin-top: 1px; }
.auth-encart strong { color: var(--text); font-weight: 600; }
@media (max-width: 480px) { .field-deux { grid-template-columns: 1fr; } }

/* ── Lignes téléphoniques de l'établissement (features/etablissement/Lignes.jsx) ── */
.res-toolbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.lg-liste { display: flex; flex-direction: column; gap: 10px; }
.lg-ligne { display: flex; align-items: flex-start; gap: 10px; }
.lg-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-dark); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.lg-num { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lg-num .cfg-input { width: 100%; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.lg-lib { width: 100%; border: none; background: transparent; padding: 0 2px; font: inherit; font-size: 11.5px; color: var(--text-3); outline: none; }
.lg-lib:focus { color: var(--text); }
.lg-lib::placeholder { color: var(--text-3); opacity: .8; }
.lg-x { width: 34px; height: 34px; margin-top: 3px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.lg-x:hover { color: var(--danger, #b3453f); border-color: color-mix(in oklch, var(--danger, #b3453f) 40%, var(--border)); }
.lg-ajout { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px dashed var(--border-strong); background: transparent; color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.lg-ajout:hover { color: var(--accent-dark); border-color: var(--accent); }
.lg-confirm { margin: -2px 0 2px 46px; padding: 11px 14px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border-strong); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.lg-confirm b { color: var(--text); }
.lg-confirm .acts { margin-left: auto; display: flex; gap: 8px; }
.lg-erreur { font-size: 12px; color: var(--danger, #b3453f); }
.lg-nouveau .cfg-input { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 720px) {
  .res-toolbar { flex-wrap: wrap; }
  .res-toolbar-actions { width: 100%; justify-content: flex-start; }
}

/* ── Quota d'appels : bandeau de la page Résidents, colonne, fenêtre des limites ── */
.q-usage { display: flex; align-items: center; gap: 14px; border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.q-usage-txt { flex: 1; min-width: 0; }
.q-usage-txt b { font-size: 14px; font-weight: 700; }
.q-usage-txt span { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; line-height: 1.4; }
.q-jauge { width: 220px; max-width: 30%; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; flex-shrink: 0; }
.q-jauge i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.3s ease; }
.q-jauge.plein i { background: var(--c-rose); }
.q-chiffre { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-chiffre small { font-size: 12px; font-weight: 500; color: var(--text-3); }
@media (max-width: 720px) { .q-jauge { display: none; } }
/* Licence en résidents atteinte : le bouton d'ajout est fermé, on dit pourquoi. */
.lic-pleine { display: flex; align-items: flex-start; gap: 9px; border: 1px solid color-mix(in oklch, var(--c-amber) 40%, var(--border)); background: color-mix(in oklch, var(--c-amber) 8%, var(--surface)); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.lic-pleine svg { flex: none; margin-top: 2px; color: color-mix(in oklch, var(--c-amber) 70%, var(--text)); }
.q-jour { display: inline-flex; align-items: baseline; gap: 5px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.q-jour b { font-weight: 700; }
.q-max { color: var(--text-3); }
.q-illim { font-size: 11.5px; color: var(--text-3); }
.q-atteint { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: color-mix(in oklch, var(--c-rose) 14%, var(--surface)); color: color-mix(in oklch, var(--c-rose) 80%, var(--text)); }
.lim-modal .cfg-modal-body { max-height: 62vh; overflow: auto; }
.lim-liste { margin: 4px 0 10px; }
.lim-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.lim-ligne:last-child { border-bottom: none; }
.lim-nom { font-size: 13.5px; font-weight: 600; min-width: 0; }
.lim-nom small { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.lim-choix { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; }
.lim-choix button { padding: 6px 12px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface); border: none; }
.lim-choix button.on { background: var(--accent-soft); color: var(--accent-dark); }
.lim-nb { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.lim-nb input { width: 54px; text-align: center; padding: 6px 4px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 600; background: var(--surface); color: var(--text); }
.lim-nb input.manque { border-color: var(--warn); }
.lim-nb.off { opacity: 0.35; }
.lim-rappel { display: block; margin-top: 6px; }
@media (max-width: 560px) { .lim-ligne { grid-template-columns: 1fr auto; } .lim-nom { grid-column: 1 / -1; } }

/* ── Documents : autorisation de participation des résidents ── */
.doc-page { display: flex; flex-direction: column; gap: 14px; }
.doc-carte h3 { margin: 0 0 4px; }
.doc-formulaire { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: start; margin-top: 12px; }
.doc-vignette { width: 84px; height: 110px; border: 1px solid var(--border-strong); border-radius: 8px; background: #fff; position: relative; box-shadow: var(--shadow-sm); }
.doc-vignette::before { content: ''; position: absolute; left: 11px; right: 11px; top: 14px; height: 6px; background: var(--accent-soft); border-radius: 3px; }
.doc-vignette::after { content: ''; position: absolute; left: 11px; right: 18px; top: 29px; height: 62px; background: repeating-linear-gradient(to bottom, var(--border) 0 2px, transparent 2px 9px); }
.doc-meta { font-size: 12px; color: var(--text-3); margin: 4px 0 12px; }
.doc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-actions a { text-decoration: none; }
.doc-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.doc-compteurs { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-compteur { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.doc-compteur.ok { background: var(--accent-soft); color: var(--accent-dark); }
.doc-compteur.att { background: color-mix(in oklch, var(--warn) 16%, var(--surface)); color: color-mix(in oklch, var(--warn) 70%, var(--text)); }
.doc-compteur.ko { background: color-mix(in oklch, var(--c-rose) 14%, var(--surface)); color: color-mix(in oklch, var(--c-rose) 80%, var(--text)); }
.doc-ligne { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(150px, 1.2fr) minmax(110px, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.doc-ligne:last-child { border-bottom: none; }
.doc-qui { font-weight: 600; min-width: 0; }
.doc-etat small { display: block; font-size: 11.5px; color: var(--text-3); margin: 1px 0 0 14px; }
.doc-etat-lib { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.doc-etat-lib i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.doc-etat-lib.ok { color: var(--accent-dark); }
.doc-etat-lib.att { color: color-mix(in oklch, var(--warn) 70%, var(--text)); }
.doc-etat-lib.ko { color: color-mix(in oklch, var(--c-rose) 80%, var(--text)); }
.doc-fichier { font-size: 12.5px; color: var(--text-2); }
.doc-fichier b { font-weight: 600; color: var(--text); }
.doc-gestes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.doc-retirer { color: color-mix(in oklch, var(--c-rose) 80%, var(--text)); }
@media (max-width: 860px) { .doc-ligne { grid-template-columns: 1fr 1fr; } .doc-gestes { grid-column: 1 / -1; justify-content: flex-start; } }
.doc-depot { width: 100%; border: 1.5px dashed var(--border-strong); border-radius: 14px; padding: 22px; text-align: center; background: var(--surface-2); font-family: inherit; color: var(--text); cursor: pointer; transition: border-color 0.13s ease, background 0.13s ease; }
.doc-depot:hover:not(:disabled), .doc-depot.est-survole { border-color: var(--accent); background: var(--accent-soft); }
.doc-depot b { display: block; font-size: 13.5px; }
.doc-depot span { font-size: 12px; color: var(--text-3); }
.doc-choisi { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.doc-choisi-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-dark); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-choisi-nom { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-choisi-nom small { display: block; font-weight: 400; color: var(--text-3); font-size: 11.5px; }
.doc-confirme { margin-top: 14px; }
.doc-secu { margin: 12px 0 0; font-size: 12px; color: var(--text-2); border-left: 2px solid var(--accent); padding-left: 10px; line-height: 1.5; }
.doc-bloque { display: inline-flex; align-items: center; margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: color-mix(in oklch, var(--c-rose) 14%, var(--surface)); color: color-mix(in oklch, var(--c-rose) 80%, var(--text)); vertical-align: middle; white-space: nowrap; }
.doc-bandeau { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid color-mix(in oklch, var(--c-rose) 35%, var(--border)); background: color-mix(in oklch, var(--c-rose) 6%, var(--surface)); border-radius: 12px; padding: 11px 14px; font-size: 13px; margin: 12px 0; }
.doc-bandeau-tx { flex: 1; min-width: 220px; line-height: 1.45; color: var(--text-2); }
.doc-bandeau-tx b { display: block; color: var(--text); }
.doc-bandeau-info { margin-bottom: 0; }

/* ── Création d'un résident en pleine page (20/09/2026) ──────────────────
   Sommaire à gauche, formulaire ouvert à droite. La page couvre la zone
   principale, le rail reste visible et ses menus passent au-dessus (z 60). */
.nr-page { position: fixed; top: 0; right: 0; bottom: 0; left: var(--sidebar-w); z-index: 50; background: var(--bg); display: flex; flex-direction: column; animation: fadeIn 0.16s ease; }
.nr-tete { display: flex; align-items: center; gap: 14px; padding: 14px 28px 13px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
.nr-retour { display: inline-flex; align-items: center; gap: 3px; border: none; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.nr-retour:hover { color: var(--accent-dark); }
.nr-titre { margin: 3px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.nr-titre span { font-weight: 500; color: var(--text-3); }
.nr-corps { flex: 1; min-height: 0; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.nr-som { border-right: 1px solid var(--border); background: var(--surface); padding: 18px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.nr-jauge { margin: 0 10px 14px; }
.nr-jauge-barre { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.nr-jauge-barre span { display: block; height: 100%; background: var(--accent); transition: width 0.2s ease; }
.nr-jauge em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); margin-top: 6px; }
.nr-som-titre { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding: 2px 10px 6px; }
.nr-som-sep { height: 1px; background: var(--border); margin: 9px 8px; flex-shrink: 0; }
.nr-som-l { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: none; border-radius: 10px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); text-align: left; cursor: pointer; flex-shrink: 0; }
.nr-som-l:hover:not(:disabled) { background: var(--bg); }
.nr-som-l.on { background: var(--accent-soft); color: var(--accent-dark); }
.nr-som-l:disabled { color: var(--text-3); cursor: default; opacity: 0.7; }
.nr-som-l small { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--warn); }
.nr-pt { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--border-strong); }
.nr-pt.ok { background: var(--accent-dark); }
.nr-pt.manque { background: var(--warn); }
.nr-som-note { margin: 10px 10px 0; font-size: 11.5px; line-height: 1.45; color: var(--text-3); }
/* `relative` : les sections mesurent leur position depuis ce conteneur. */
.nr-form { position: relative; overflow-y: auto; padding: 24px 32px 48px; }
.nr-form-in { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.nr-bloc { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 20px; }
.nr-bloc + .nr-bloc { margin-top: 12px; padding-top: 28px; border-top: 1px solid var(--border); }
.nr-bloc-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nr-bloc-titre { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.005em; }
.nr-erreur-source { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nr-pied { flex-shrink: 0; justify-content: flex-end; padding: 13px 28px; }
.nr-pied .cfg-actions-manque { margin-left: 0; margin-right: auto; }
.nr-fin { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.nr-fin .cfg-done { max-width: 500px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
/* Tablette : le sommaire passe en bandeau défilant au-dessus du formulaire. */
@media (max-width: 960px) {
  .nr-corps { display: flex; flex-direction: column; }
  .nr-som { flex-direction: row; align-items: center; gap: 6px; border-right: none; border-bottom: 1px solid var(--border); padding: 10px 16px; overflow-x: auto; overflow-y: hidden; flex-shrink: 0; }
  .nr-jauge, .nr-som-titre, .nr-som-sep, .nr-som-note { display: none; }
  .nr-som-l { width: auto; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; white-space: nowrap; gap: 7px; }
  .nr-som-l.on { border-color: transparent; }
  .nr-som-l small { margin-left: 2px; }
  .nr-form { flex: 1; min-height: 0; padding: 20px 20px 40px; }
  .nr-form-in { max-width: none; }
}
/* Mobile : plus de rail, la page passe au-dessus du menu du bas. */
@media (max-width: 720px) {
  .nr-page { left: 0; z-index: 100; }
  .nr-tete { padding: 12px 16px; }
  .nr-titre { font-size: 17px; }
  .nr-form { padding: 16px 14px 32px; }
  .nr-pied { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
}
.nr-form .cfg-depose { background: var(--surface); }
/* Création d'un résident : les deux onglets d'état et les champs « Agité ». */
.nr-onglets { margin: 0 0 0 auto; align-self: center; }
.nr-onglets .cfg-onglet:disabled { opacity: 0.5; cursor: default; }
.nr-onglet-n { margin-left: 7px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--accent-dark); color: #fff; }
.nr-som-l small.perso { color: var(--accent-dark); }
.nr-ag-tete { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nr-ag-tete .cfg-herite-badge, .nr-ag-tete .cfg-perso-badge { margin-left: 4px; }
.nr-ag-tete .cfg-perso-bascule { margin-left: auto; padding: 3px 10px; font-size: 11.5px; }
/* Valeur héritée : lisible mais en retrait, en pointillés, non modifiable. */
.nr-ag-valeur { padding: 10px 13px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.5; color: var(--text-3); white-space: pre-wrap; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 720px) {
  .nr-tete { flex-wrap: wrap; row-gap: 10px; }
  .nr-onglets { margin-left: 0; width: 100%; }
  .nr-onglets .cfg-onglet { flex: 1; }
}
.nr-fermer { flex-shrink: 0; margin-left: 6px; }
@media (max-width: 720px) {
  /* La croix reste sur la ligne du titre, les onglets passent dessous. */
  .nr-tete > div:first-child { flex: 1; min-width: 0; }
  .nr-fermer { order: 1; margin-left: 0; }
  .nr-onglets { order: 2; }
}
/* Création d'un résident : le document gardé à gauche pendant la relecture.
   Il prend la place du sommaire, qui passe en bandeau au-dessus du formulaire. */
.nr-corps.avec-doc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr); }
.nr-corps.avec-doc .nr-source { grid-column: 1; grid-row: 1 / span 2; }
.nr-corps.avec-doc .nr-som { grid-column: 2; grid-row: 1; }
.nr-corps.avec-doc .nr-form { grid-column: 2; grid-row: 2; min-height: 0; }
.nr-som.bandeau { flex-direction: row; align-items: center; gap: 6px; border-right: none; border-bottom: 1px solid var(--border); padding: 10px 16px; overflow-x: auto; overflow-y: hidden; }
.nr-som.bandeau .nr-jauge, .nr-som.bandeau .nr-som-titre, .nr-som.bandeau .nr-som-sep, .nr-som.bandeau .nr-som-note { display: none; }
.nr-som.bandeau .nr-som-l { width: auto; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; white-space: nowrap; gap: 7px; }
.nr-som.bandeau .nr-som-l.on { border-color: transparent; }
.nr-som.bandeau .nr-som-l small { margin-left: 2px; }
.nr-source { border-right: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 16px 16px; }
.nr-source-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nr-source-tete .nr-som-titre { padding: 0; }
.nr-source-onglets { display: flex; gap: 6px; flex-wrap: wrap; }
.nr-source-onglets .q-chip { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 12px; font-size: 12.5px; }
.nr-source-vue { flex: 1; min-height: 0; overflow: auto; display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.nr-source-vue iframe { flex: 1; width: 100%; border: none; }
.nr-source-vue img { width: 100%; height: auto; align-self: flex-start; }
.nr-source-vue > p { margin: 16px; }
.nr-source-texte { padding: 16px 18px; font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; }
.nr-voir-doc { margin-left: auto; flex-shrink: 0; }
.nr-voir-doc + .nr-onglets { margin-left: 0; }
/* Écran étroit : le document prend la place du formulaire, le bouton y ramène. */
@media (max-width: 960px) {
  .nr-corps.avec-doc .nr-form { display: none; }
  .nr-source { flex: 1; border-right: none; }
}
@media (max-width: 720px) {
  .nr-voir-doc { order: 3; margin-left: 0; }
}
/* Onglet Documents : les deux modèles vierges, côte à côte. */
.doc-modeles { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 14px; border-top: 1px solid var(--border); }
/* Un filet net entre les deux documents : vertical côte à côte, horizontal empilés. */
.doc-modeles > .doc-formulaire { margin-top: 0; padding: 18px 26px 4px 0; }
.doc-modeles > .doc-formulaire + .doc-formulaire { border-left: 1px solid var(--border); padding: 18px 0 4px 26px; }
.doc-modele-titre { font-size: 14px; font-weight: 700; }
.doc-modele-desc { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.doc-modeles .doc-meta { margin: 6px 0 10px; }
@media (max-width: 900px) {
  .doc-modeles { grid-template-columns: 1fr; }
  .doc-modeles > .doc-formulaire { padding: 18px 0; }
  .doc-modeles > .doc-formulaire + .doc-formulaire { border-left: none; border-top: 1px solid var(--border); padding: 18px 0 4px; }
}
/* Autorisation : plusieurs fichiers, réunis en un seul PDF dans l'ordre affiché. */
.doc-depot-suite { padding: 12px; }
.doc-choisis { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.doc-choisis .doc-choisi-ic { font-size: 12.5px; font-weight: 700; }
.doc-ordre { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; padding: 0; flex-shrink: 0; }
.doc-ordre:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.doc-ordre:disabled { opacity: 0.35; cursor: default; }
.doc-ordre-haut svg { transform: rotate(180deg); }
/* Accueil : tuile « Notifications ». Calme à dessein, des puces blanches à fin
   contour sous le chiffre, aucune couleur d'alerte. */
.nt-puces { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.nt-puce { font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; transition: border-color 0.14s ease, color 0.14s ease; }
.nt-puce:hover { border-color: var(--border-strong); color: var(--text); }

/* ── Fiche résident : les deux fils (21/09/2026) ─────────────────────────
   Points de vigilance (rouge) et découvertes (vert), à la place du chat.
   Une remontée = une ligne, rangée par jour ; la couleur n'est qu'un repère. */
.fl-fil.rouge, .fl-fenetre-source.rouge { --ton: oklch(0.52 0.13 25); --ton-doux: oklch(0.96 0.025 25); --ton-bord: oklch(0.86 0.06 25); }
.fl-fil.vert, .fl-fenetre-source.vert { --ton: oklch(0.46 0.10 155); --ton-doux: oklch(0.96 0.03 150); --ton-bord: oklch(0.85 0.06 150); }
.fl-zone { position: relative; margin-bottom: 18px; }
.fl-zone.est-verrouille { min-height: 260px; }
.fl-zone.est-verrouille > *:not(.vig-gate) { filter: blur(6px); pointer-events: none; user-select: none; }
.fl-zone.est-verrouille .vig-gate { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 11px; padding: 24px; }
.fl-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.fl-fil { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden; min-width: 0; }
.fl-tete { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 15px 18px 12px; }
.fl-pt { width: 9px; height: 9px; border-radius: 50%; background: var(--ton); flex-shrink: 0; }
.fl-tete h3 { margin: 0; font-size: 15px; font-weight: 700; }
.fl-tete small { font-size: 12.5px; color: var(--text-3); font-weight: 500; }
.fl-tete-droite { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.fl-filtre { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 2px; }
.fl-filtre button { font: inherit; font-size: 12px; font-weight: 600; color: var(--text-3); padding: 4px 9px; border: 0; border-radius: 7px; background: none; cursor: pointer; }
.fl-filtre button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.fl-discret { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 4px 7px; border-radius: 8px; white-space: nowrap; }
.fl-discret:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.fl-discret:disabled { opacity: 0.5; cursor: default; }
/* Réponses de Livana (appels « agité »), dans les deux fils. L'étoile scintille. */
.fl-sugg-marque { display: inline-flex; color: var(--accent-dark); }
.fl-sugg-marque svg { overflow: visible; }
.fl-sugg-marque path { transform-box: fill-box; transform-origin: center; animation: fl-scintille 2.4s ease-in-out infinite; }
.fl-sugg-marque path:nth-child(2) { animation-delay: .8s; }
.fl-sugg-marque path:nth-child(3) { animation-delay: 1.6s; }
@keyframes fl-scintille { 0%, 100% { opacity: .45; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .fl-sugg-marque path { animation: none; } }
/* Le dépli en conversation (variante D de apercu-depli-epure.html), « Juste avant » en encadré (A de apercu-juste-avant.html). */
.fl-avant { background: var(--surface-2); border-radius: 12px; padding: 10px 13px; }
.fl-avant-t { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); margin-bottom: 4px; }
.fl-avant p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.fl-avant-attente { display: flex; align-items: center; gap: 8px; color: var(--text-3) !important; }
.fl-mini { display: flex; gap: 14px; justify-content: flex-end; margin-top: 6px; }
.fl-pied { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ton-bord, var(--border)); }
.fl-pied-lien { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-3); background: none; border: 0; padding: 2px 0; cursor: pointer; }
.fl-pied-lien:hover:not(:disabled) { color: var(--text); }
.fl-pied-lien:disabled { opacity: .5; cursor: default; }
.fl-pied-lien.fort { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.fl-pied-lien.accent { color: var(--accent-dark); }
@media (max-width: 640px) { .fl-sc-msg { max-width: 94%; } }
.fl-sc-badge { font-size: 11px; font-weight: 700; color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
/* Le dépli en conversation : note grise, résident à gauche dans la couleur du fil, Livana à droite. */
.fl-sc-etape-l { font-size: 12px; color: var(--text-3); margin-top: 8px; }
.fl-sc-msg { display: flex; flex-direction: column; max-width: 82%; margin-top: 10px; }
.fl-sc-qui { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; margin: 0 4px 3px; }
.fl-sc-bulle { font-size: 14px; line-height: 1.5; padding: 9px 13px; color: var(--text); }
.fl-sc-msg.elle { align-items: flex-start; }
.fl-sc-msg.elle .fl-sc-qui { color: var(--ton); }
.fl-sc-msg.elle .fl-sc-bulle { background: var(--ton-doux); border-radius: 16px 16px 16px 4px; }
.fl-sc-msg.livana { align-items: flex-end; margin-left: auto; }
.fl-sc-msg.livana .fl-sc-qui { color: var(--accent-dark); }
.fl-sc-msg.livana .fl-sc-bulle { background: var(--accent-soft); border: 1.5px dashed color-mix(in oklch, var(--accent) 60%, transparent); border-radius: 16px 16px 4px 16px; }
.fl-sc-msg.livana.dite .fl-sc-bulle { border-style: solid; }
.fl-sc-prop { display: flex; flex-direction: column; align-items: flex-end; }
.fl-sc-prop .fl-sc-pq { max-width: 82%; text-align: right; }
.fl-sc-pq { margin-top: 8px; }
.fl-sc-pq summary { list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; }
.fl-sc-pq summary::-webkit-details-marker { display: none; }
.fl-sc-pq summary::before { content: "›"; display: inline-block; font-size: 14px; transition: transform .15s; }
.fl-sc-pq[open] summary::before { transform: rotate(90deg); }
.fl-sc-pq p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.fl-sugg-pourquoi { display: block; font-size: 12.5px; color: var(--text-3); margin: 2px 0 6px; line-height: 1.45; }
.fl-sugg-choix { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 13px; margin: 6px 0; color: var(--text); }
/* Onglet « Agité » de la configuration : les exemples par étape. */
/* La consigne en cours, en pastille sous l'en-tête du fil. */
.fl-consigne-ligne { display: flex; align-items: center; gap: 10px; padding: 0 18px 12px; margin-top: -4px; min-width: 0; }
.fl-questionner { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 700; border: 0; border-radius: 9px; padding: 6px 11px; background: var(--accent); color: #fff; cursor: pointer; white-space: nowrap; }
.fl-questionner:hover { background: var(--accent-dark); }
.fl-consigne-puce { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; font: inherit; font-size: 12.5px; color: var(--text-2); background: var(--ton-doux); border: 1px dashed var(--ton-bord); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.fl-consigne-puce svg { color: var(--ton); flex-shrink: 0; }
.fl-consigne-puce b { color: var(--ton); font-weight: 700; white-space: nowrap; }
.fl-consigne-puce span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-consigne-puce.vide { color: var(--text-3); }
.fl-consigne-puce:hover:not(:disabled), .fl-consigne-puce[aria-expanded="true"] { border-style: solid; color: var(--text); }
.fl-consigne-puce:disabled { opacity: 0.5; cursor: default; }
.fl-consigne { margin: 0 18px 14px; border: 1px dashed var(--ton-bord); border-radius: 12px; padding: 10px 12px; background: var(--ton-doux); }
.fl-consigne label, .fl-ajout-l { display: block; font-size: 12px; font-weight: 700; color: var(--text-2); }
.fl-consigne label { color: var(--ton); }
.fl-consigne textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; font: inherit; font-size: 13.5px; font-weight: 400; line-height: 1.45; border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px 10px; background: var(--surface); color: var(--text); resize: vertical; }
.fl-consigne p { margin: 6px 0 0; font-size: 11.5px; color: var(--text-3); line-height: 1.45; }
.fl-consigne-bas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 9px; }
.fl-vide { margin: 0; padding: 14px 18px 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-3); }
.fl-attente { padding: 4px 18px 18px; }
.fl-jour { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); padding: 11px 18px 5px; border-top: 1px solid var(--border); background: color-mix(in oklch, var(--surface-2) 45%, var(--surface)); }
.fl-rang { display: flex; align-items: center; gap: 10px; padding: 9px 18px; cursor: pointer; min-height: 38px; box-sizing: border-box; }
.fl-rang:hover, .fl-ligne.ouverte .fl-rang { background: color-mix(in oklch, var(--ton-doux) 60%, var(--surface)); }
.fl-rang:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fl-rang .fl-pt { width: 7px; height: 7px; }
.fl-ligne.vu .fl-pt { background: transparent; border: 1.5px solid var(--border-strong); }
.fl-titre { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; line-height: 1.35; }
.fl-ligne.vu .fl-titre { font-weight: 500; color: var(--text-2); }
.fl-rec { font-size: 11px; font-weight: 700; color: var(--ton); background: var(--ton-doux); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.fl-quand { font-size: 12px; color: var(--text-3); white-space: nowrap; }
/* Les deux gestes rapides sont toujours visibles, après l'heure (essai du
   22/09/2026, à la demande du user ; avant, ils n'apparaissaient qu'au
   survol, à la place de l'heure). Ils restent aussi dans une ligne dépliée. */
.fl-survol { display: flex; gap: 2px; align-items: center; margin: -4px -6px -4px 6px; }
.fl-survol.fixe { display: flex; margin-left: auto; }
.fl-detail { padding: 12px 18px 14px 35px; background: var(--surface); border-top: 1px solid var(--border); }
/* L'échange en deux bulles : Livana à gauche, le résident décalé, dans la couleur du fil. */
.fl-bulle { max-width: 88%; font-size: 13.5px; line-height: 1.5; padding: 8px 12px; border-radius: 14px; margin: 6px 0 8px; background: var(--surface); border: 1px solid var(--border); }
.fl-bulle b { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 2px; }
.fl-bulle.livana { color: var(--text-2); border-bottom-left-radius: 4px; }
.fl-bulle.livana b { color: var(--accent-dark); }
.fl-contexte { max-width: 100%; }
.fl-contexte-attente { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); }
.fl-detail blockquote.fl-bulle.resident { margin: 0 0 9px 24px; padding: 8px 12px; border: 1px solid var(--ton); border-left-width: 3px; border-bottom-right-radius: 4px; font-style: italic; color: var(--text); }
.fl-bulle.resident b { color: var(--ton); font-style: normal; }
.fl-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fl-lien { font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: none; padding: 4px 2px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fl-lien:hover { color: var(--text); }
.fl-fenetre-corps { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.fl-fenetre-corps textarea, .fl-fenetre-corps select, .fl-fenetre-corps input[type="text"] { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; font: inherit; font-size: 14px; font-weight: 400; line-height: 1.45; border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 11px; background: var(--surface); color: var(--text); resize: vertical; }
.fl-fenetre-corps input[type="text"]:focus, .fl-fenetre-corps textarea:focus, .fl-fenetre-corps select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, oklch(0.62 0.07 175 / 0.15)); }
.fl-fenetre-source { border: 1px solid var(--ton-bord); background: var(--ton-doux); border-radius: 12px; padding: 11px 13px; font-size: 13.5px; }
.fl-fenetre-source blockquote { margin: 6px 0 0; font-size: 13px; font-style: italic; color: var(--text-2); line-height: 1.45; }
.fl-ajout-aide { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 400; color: var(--text-3); line-height: 1.45; }
.fl-erreur { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--danger); }
.fl-voir-tout { display: block; width: 100%; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: none; border: 0; border-top: 1px solid var(--border); padding: 11px; cursor: pointer; }
.fl-voir-tout:hover { color: var(--text); background: var(--surface-2); }
.fl-etat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 10px; }
.fl-etat-erreur { color: var(--danger); }
.vr-progres { margin: 0 0 12px; }
/* Légende de la Vue rapide : les pastilles témoins, sous l'en-tête. */
.home-vign-legende { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--text-3); margin: -6px 0 12px; }
.fl-tourne { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent-dark); animation: flTourne 0.9s linear infinite; }
@keyframes flTourne { to { transform: rotate(360deg); } }
/* L'envol vers l'onglet, et l'onglet qui s'allume à l'arrivée. */
.fl-envol { position: fixed; z-index: 400; pointer-events: none; display: inline-flex; align-items: center; gap: 8px; max-width: 360px; padding: 7px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); font-size: 13px; font-weight: 600; white-space: nowrap; transform-origin: center; }
.fl-envol.rouge { --ton: oklch(0.52 0.13 25); } .fl-envol.vert { --ton: oklch(0.46 0.10 155); }
.fl-envol i { width: 8px; height: 8px; border-radius: 50%; background: var(--ton); flex-shrink: 0; }
.fl-envol span { overflow: hidden; text-overflow: ellipsis; }
.prof-tab.recu { animation: flRecu 1s ease; }
@keyframes flRecu {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 45%, transparent); }
  25% { transform: scale(1.07); background: var(--accent-soft); color: var(--accent-dark); box-shadow: 0 0 0 6px color-mix(in oklch, var(--accent) 18%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 12px transparent; }
}
.fl-pied { font-size: 12px; color: var(--text-3); line-height: 1.5; margin: 12px 2px 0; }
/* Onglet Accueil : les fils à gauche, l'un sous l'autre ; la colonne de toujours à droite. */
.prof-grid-fils { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; }
.prof-grid-fils .fl-zone { margin-bottom: 0; min-width: 0; }
.prof-grid-fils .fl-deux { grid-template-columns: 1fr; }
@media (max-width: 1080px) {
  .prof-head-kpis { display: none; }
  .prof-grid-fils { grid-template-columns: 1fr; }
  .fl-deux { grid-template-columns: 1fr; }
}
/* Point avec réponses proposées : moments numérotés, reliés par un trait (variante C, 24/09/2026) */
.fl-moments { margin-top: 14px; }
.fl-moment { position: relative; padding-left: 26px; }
.fl-moment + .fl-moment { margin-top: 16px; }
.fl-moment::before { content: ""; position: absolute; left: 8px; top: 24px; bottom: -12px; width: 2px; background: var(--border); }
.fl-moment:last-child::before { display: none; }
.fl-moment-num { position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; display: grid; place-items: center; color: #fff; }
.fl-moment-num.rouge { background: var(--ton); }
.fl-moment-num.sauge { background: var(--accent-dark); }
.fl-moment-titre { font-size: 12.5px; font-weight: 700; color: var(--accent-dark); margin-bottom: -4px; }
.fl-moment-titre.rouge { color: var(--ton); }
.fl-moment-titre span { font-weight: 500; color: var(--text-3); }
/* Étape choisie par Livana, en tête de sa réplique (variante B de apercu-etape-balise.html, 24/09/2026) */
.etape-pas { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
.etape-pas::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etape-pas.emotion { background: oklch(0.95 0.03 25); color: oklch(0.5 0.12 25); }
.etape-pas.sujet { background: oklch(0.95 0.03 250); color: oklch(0.45 0.10 250); }
.etape-pas.action { background: oklch(0.95 0.035 75); color: oklch(0.48 0.10 70); }
.etape-pas.ailleurs { background: oklch(0.95 0.03 300); color: oklch(0.45 0.10 300); }
.etape-pas.neutre { background: var(--surface-2); color: var(--text-3); }

/* Exemples par étape (onglet Agité) : le compte à côté du nom de l'étape */
.cfg-compte { font-size: 11.5px; font-weight: 500; color: var(--text-3); }
/* Gestes rapides d'une ligne des fils : un bloc à deux cases (variante C de apercu-gestes-fils.html, 24/09/2026) */
.fl-survol.fl-gestes { display: inline-flex; gap: 0; margin: -3px 0 -3px 8px; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; background: var(--surface); flex-shrink: 0; }
.fl-survol.fixe.fl-gestes { margin-left: auto; }
.fl-geste { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border: 0; background: none; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.fl-geste + .fl-geste { border-left: 1px solid var(--border-strong); }
.fl-geste:hover:not(:disabled) { background: var(--ton-doux); color: var(--ton); }
.fl-geste:disabled { opacity: 0.5; cursor: default; }
/* Légende des étapes de Livana, en tête de la transcription du tiroir d'appel */
/* Variante D de apercu-legende-etapes.html : une ligne par étape, un filet de points relie la pastille à son sens (comme H) */
.etapes-legende { display: grid; grid-template-columns: max-content 1fr; gap: 2px 6px; align-items: center; margin: 0 0 8px; padding: 6px 0 8px; border-bottom: 1px solid var(--border); font-size: 11.5px; line-height: 1.35; color: var(--text-3); }
.etapes-legende-ligne { display: contents; }
.etapes-legende-titre { grid-column: 1 / -1; margin-bottom: 3px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.etapes-legende-gauche { display: flex; align-items: center; gap: 6px; }
.etapes-legende-gauche .etape-pas { margin-right: 0; font-size: 10.5px; padding: 0 7px 0 5px; }
.etapes-legende-gauche i { flex: 1; min-width: 14px; height: 0; border-bottom: 1px dotted var(--border-strong); margin-top: 2px; }
/* État choisi au lancement de l'appel, dans l'en-tête du tiroir : contour seul, pour ne pas ressembler aux humeurs */
.drawer-etat { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--text-2); vertical-align: 1px; }
.drawer-etat.agite { border-color: oklch(0.75 0.08 25); color: oklch(0.5 0.12 25); }
.drawer-etat.decouverte { border-color: oklch(0.75 0.06 250); color: oklch(0.45 0.10 250); }
/* Lecteur de l'enregistrement de l'appel, sous le résumé du tiroir */
.lecteur-appel { margin-top: 12px; }
.lecteur-appel audio { width: 100%; height: 36px; }
.lecteur-appel-msg { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.lecteur-appel-rang { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lecteur-appel-rang audio { flex: 1; min-width: 240px; }
.lecteur-appel-supprimer { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-3); background: none; border: 0; padding: 0; cursor: pointer; }
.lecteur-appel-supprimer:hover:not(:disabled) { color: oklch(0.5 0.15 25); }
.lecteur-appel-supprimer:disabled { opacity: .5; cursor: default; }
.lecteur-appel-confirmer { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.lecteur-appel-confirmer .lien-danger { font: inherit; font-weight: 700; color: oklch(0.5 0.15 25); background: none; border: 0; padding: 0; cursor: pointer; }
.lecteur-appel-confirmer .lien-discret { font: inherit; color: var(--text-3); background: none; border: 0; padding: 0; cursor: pointer; }
/* Tiroir d'appel, variante C de apercu-tiroir-appel.html : trois cases dans l'en-tête */
.tir-cases { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tir-case { flex: 1 1 90px; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; }
.tir-case-large { flex: 2 1 200px; }
.tir-case-etiq { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.tir-case b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; font-weight: 700; }
.tir-case .mood-pill { font-size: 12px; }
.tir-etat.agite { color: oklch(0.5 0.12 25); }
.tir-etat.decouverte { color: oklch(0.45 0.10 250); }
.tir-vide { font-weight: 500; color: var(--text-3); }
/* L'enregistrement en bandeau, en tête du corps */
.lecteur-bandeau { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 22px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); }
.lecteur-bandeau audio { flex: 1; min-width: 0; height: 36px; }
.lecteur-bandeau-play { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--accent-dark); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lecteur-bandeau-play:disabled { opacity: .5; cursor: default; }
.lecteur-bandeau-txt { flex: 1; min-width: 0; }
.lecteur-bandeau-txt b { display: block; font-size: 13px; }
.lecteur-bandeau-txt small { display: block; font-size: 11.5px; color: var(--text-3); }
.lecteur-bandeau-suppr { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: var(--accent-dark); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lecteur-bandeau-suppr:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); }
.lecteur-bandeau-suppr:disabled { opacity: .5; cursor: default; }
/* Le fil de l'appel (variante 3 bis de apercu-legende-tiroir-c.html) */
.fil-appel { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.fil-appel-barre { display: flex; gap: 2px; height: 10px; margin: 6px 0; border-radius: 6px; overflow: hidden; }
.fil-appel-barre button { flex: 1; min-width: 4px; height: 100%; padding: 0; border: 0; cursor: pointer; }
.fil-appel-barre button:hover { filter: brightness(1.25); }
.bubble.bulle-eclair { animation: bulleEclair 1.6s ease; }
@keyframes bulleEclair { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.fil-appel-bornes { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); }
.fil-appel-leg { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; font-size: 12px; color: var(--text-2); }
.fil-appel-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; }
.fil-appel .emotion { background: oklch(0.5 0.12 25); }
.fil-appel .sujet { background: oklch(0.45 0.10 250); }
.fil-appel .action { background: oklch(0.55 0.11 70); }
.fil-appel .ailleurs { background: oklch(0.45 0.10 300); }
.fil-appel .neutre { background: var(--border-strong); }

/* ── Suppression d'un résident (26/09/2026) : menu « ⋯ », fenêtre, message ── */
.res-plus { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 6px; vertical-align: middle; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--text-2); cursor: pointer; flex: none; }
.res-plus:hover, .res-plus.ouvert { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.res-table .td-open { white-space: nowrap; }
.res-menu { position: fixed; z-index: 1000; width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; }
.res-menu-item { display: flex; width: 100%; align-items: flex-start; gap: 10px; text-align: left; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; color: var(--text); }
.res-menu-item svg { flex: none; margin-top: 1px; }
.res-menu-item small { display: block; font-size: 11.5px; color: var(--text-3); font-weight: 400; margin-top: 2px; }
.res-menu-item:hover { background: var(--surface-2); }
.res-menu-item.danger { color: var(--danger); }
.prof-head-menu { margin-left: auto; align-self: center; }
.sup-titre { color: var(--danger); }
.sup-tx { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 10px; }
.sup-chiffres { display: grid; gap: 8px; margin: 4px 0 14px; }
.sup-chiffres div { background: var(--surface-2); border-radius: 10px; padding: 10px 8px; text-align: center; }
.sup-chiffres b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.sup-chiffres span { font-size: 11.5px; color: var(--text-3); line-height: 1.3; display: block; }
.sup-chiffres.attente { display: block; background: var(--surface-2); border-radius: 10px; padding: 16px; text-align: center; font-size: 12.5px; color: var(--text-3); }
.sup-lbl { display: block; font-size: 12.5px; font-weight: 600; margin: 6px 0 4px; }
.sup-lbl b { font-weight: 700; }
.sup-code { max-width: 160px; letter-spacing: .2em; }
.sup-erreur { font-size: 13px; color: var(--danger); line-height: 1.5; margin: 8px 0 0; }
.sup-etape { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--text-2); margin: 8px 0; }
.sup-etape i { width: 18px; height: 18px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 700; box-sizing: border-box; }
.sup-etape i.fait { background: var(--accent); color: #fff; }
.sup-etape i.encours { border: 2px solid var(--accent); border-right-color: transparent; animation: supTourne .8s linear infinite; }
.sup-etape i.attente { border: 1.5px solid var(--border-strong); }
.sup-etape i.echec { background: var(--danger); color: #fff; }
@keyframes supTourne { to { transform: rotate(360deg); } }
.livana-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2000; max-width: min(520px, calc(100vw - 32px)); background: var(--text); color: #fff; border-radius: 12px; padding: 12px 18px; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: opacity .4s; }
.livana-toast.sort { opacity: 0; }