/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f3f3f5;
  --border: #e8e8ec;
  --border-light: #f0f0f3;
  --primary: #1a1a2e;
  --primary-soft: #3a3a5c;
  --accent: #c9a87c;
  --accent-light: #e8d5bc;
  --accent-dark: #a8845a;
  --text: #1a1a2e;
  --text-muted: #8b8b9e;
  --text-light: #b0b0c0;
  --success: #34a853;
  --success-light: #e8f5e9;
  --warning: #f4a623;
  --warning-light: #fff8e1;
  --error: #d93025;
  --error-light: #fce8e6;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --radius-lg: 20px;
  --radius-full: 50%;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
  --shadow: 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.08);
  --shadow-focus: var(--shadow-focus);
  --transition: .2s cubic-bezier(.4,0,.2,1);
  --bg-muted: #f9fafb;
  --gold: #ffd700;
  --gold-dark: var(--gold-dark);
}

html, body {
  height: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  display: flex;
  overflow: hidden;
}

a { color: var(--accent-dark); text-decoration: none; }

/* ===== APP LAYOUT ===== */
.app-layout {
  display: flex;
  width: 100%;
  height: 100vh;
}

.app-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* ===== LEFT SIDEBAR ===== */
.app-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 8px;
  gap: 8px;
  flex-shrink: 0;
  z-index: 10;
}

.sidebar-brand {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow .15s, transform .1s;
}

.sidebar-brand:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  transform: scale(1.03);
}

.sidebar-brand svg {
  width: 20px;
  height: 20px;
  color: #fff;
}

.sidebar-brand.has-logo svg {
  color: var(--primary);
}

.sidebar-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

.sidebar-brand.has-logo {
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border-radius: 14px;
  padding: 5px;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
}

.sidebar-btn {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  position: relative;
}

.sidebar-btn svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.sidebar-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.sidebar-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(26,26,46,.2);
}

.sidebar-btn .sidebar-tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary);
  color: #fff;
  font-size: .72rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}

.sidebar-btn:hover .sidebar-tooltip {
  opacity: 1;
}

.sidebar-spacer {
  flex: 1;
}

/* ===== HEADER ===== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Logo image Scala (remplace le texte SCALA) */
.logo-img { display: block; width: auto; }
.logo-img-header { height: 30px; }
.logo-img-login { height: 46px; margin: 0 auto 6px; }
.logo-img-home { height: 64px; margin: 0 auto 12px; }

.app-header-left h1 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -.01em;
}

.app-header-left .subtitle {
  font-size: .8rem;
  color: var(--text-muted);
  font-weight: 400;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}

.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 500;
}

.header-badge svg {
  width: 14px;
  height: 14px;
}

/* ===== SCREENS ===== */
.screen {
  display: none;
  flex: 1;
  min-height: 0;
  padding: 32px 40px;
  animation: fadeIn .3s ease;
  overflow-y: auto;
}

.screen.active { display: block; }

.screen-centered {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.screen-wide {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.home-hero {
  padding-top: 60px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  flex-shrink: 0;
}

.home-hero h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0;
}

.home-hero p {
  font-size: .88rem;
  color: var(--text-muted);
  margin: 0 0 16px;
}

/* ===== SCREEN TITLE ===== */
.screen-title {
  margin-bottom: 32px;
}

.screen-title h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
  letter-spacing: -.02em;
}

.screen-title p {
  font-size: .88rem;
  color: var(--text-muted);
}

/* ===== CARDS ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}

.card:hover {
  box-shadow: var(--shadow);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.card-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-header-icon svg {
  width: 20px;
  height: 20px;
  color: var(--accent-dark);
  stroke-width: 1.8;
}

.card-header-text h3 {
  font-size: .95rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 2px;
}

.card-header-text p {
  font-size: .8rem;
  color: var(--text-muted);
}

.card h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--primary);
}

.card h3 {
  font-size: .92rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--primary-soft);
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 28px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: -.01em;
}

.btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26,26,46,.15);
}
.btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201,168,124,.25);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--primary); background: var(--surface-2); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  padding: 8px 16px;
}
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }

.btn-sm { padding: 7px 16px; font-size: .82rem; }

.btn-lg { padding: 16px 40px; font-size: 1rem; border-radius: var(--radius); }

/* btn-danger removed (unused) */

/* ===== FORMS ===== */
input[type="text"], input[type="file"], textarea, select {
  width: 100%;
  padding: 11px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .88rem;
  transition: all var(--transition);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

textarea { resize: vertical; min-height: 80px; }

label {
  display: block;
  font-size: .82rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}

.form-group { margin-bottom: 20px; }

/* ===== FILE DROP ZONE ===== */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 36px;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  background: var(--surface-2);
}

.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--accent);
  background: rgba(201,168,124,.04);
}

.drop-zone input { display: none; }

.drop-zone-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.drop-zone-icon svg {
  width: 32px;
  height: 32px;
  color: var(--text-light);
  stroke-width: 1.5;
}

.drop-zone p {
  font-size: .85rem;
  color: var(--text-muted);
}

.drop-zone .drop-zone-hint {
  font-size: .75rem;
  color: var(--text-light);
  margin-top: 6px;
}

.drop-zone-preview {
  max-width: 100%;
  max-height: 180px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

/* ===== STATUS PILL ===== */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-lg);
  font-size: .8rem;
  font-weight: 500;
}

.status-pill.success {
  background: var(--success-light);
  color: var(--success);
}

.status-pill svg {
  width: 14px;
  height: 14px;
}

/* ===== PROGRESS JOBS ===== */
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.job-card {
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
  transition: all var(--transition);
}

.job-card.has-preview {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.job-visual {
  width: 100%;
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}

.job-preview-img,
.job-preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.job-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.job-icon svg {
  width: 28px;
  height: 28px;
  color: var(--text-light);
}

.job-icon-done svg {
  color: var(--success);
}

.job-icon-error svg {
  color: var(--error);
}

.job-card[data-status="processing"] .job-visual {
  background: linear-gradient(135deg, var(--surface-2), var(--border-light));
}

.job-label {
  padding: 10px 8px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-muted);
  border-top: 1px solid var(--border-light);
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===== PERSONA CARD ===== */
.persona-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}

.persona-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transition: all .3s ease;
}

.persona-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.persona-avatar svg {
  width: 28px;
  height: 28px;
  color: var(--text-light);
}

.persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
}

.persona-field {
  font-size: .85rem;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}

.persona-field .label {
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}

/* ===== SESSION LAYOUT ===== */
#screen-session {
  padding: 12px 20px;
  overflow: hidden;
}

#screen-session .screen-wide {
  height: 100%;
  max-width: 100%;
}

.session-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  height: calc(100vh - 90px);
  min-height: 0;
}

@media (max-width: 960px) {
  .session-layout { grid-template-columns: 1fr; height: auto; }
}

.session-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.visual-zone {
  display: flex;
  gap: 12px;
  min-height: 0;
  flex: 1;
  align-items: stretch;
}

.visual-main {
  flex: 1;
  min-height: 0;
  max-width: 400px;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  border: 1px solid var(--border);
  aspect-ratio: 9/16;
}

/* Grid stacking: all children occupy the same cell, no absolute positioning */
.visual-main > * {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
}

.visual-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.visual-main video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Portrait thumbnails — stacked vertically */
.image-thumbnails {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.image-thumb {
  width: 72px;
  aspect-ratio: 9/16;
  background: var(--surface-2);
  border-radius: var(--radius-xs);
  overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
}

.image-thumb:hover, .image-thumb.active {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== CHAT ZONE ===== */
.chat-zone {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
}

.chat-zone-header {
  padding: 12px 16px 12px 24px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-zone-header h3 {
  font-size: .92rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0;
}

.chat-zone-header .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.msg {
  max-width: 85%;
  padding: 12px 18px;
  border-radius: 18px;
  font-size: .87rem;
  line-height: 1.55;
}

.msg.ba {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 6px;
}

.msg.consommatrice {
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--text);
  border-bottom-left-radius: 6px;
  border: 1px solid var(--border-light);
}

.msg.systeme {
  align-self: center;
  background: var(--warning-light);
  color: var(--gold-dark);
  font-size: .8rem;
  font-weight: 500;
  text-align: center;
  border-radius: var(--radius-lg);
  max-width: 70%;
}

.msg .msg-role {
  font-size: .7rem;
  opacity: .6;
  margin-bottom: 4px;
  font-weight: 500;
}

.msg.consommatrice[data-video-url] {
  cursor: pointer;
}

.msg.consommatrice[data-video-url]:hover {
  box-shadow: var(--shadow);
  border-color: var(--accent);
}

/* Typing indicator (3 bouncing dots — WhatsApp style) */
.typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 20px;
  padding: 2px 0;
}

.typing-dots span {
  width: 7px;
  height: 7px;
  background: var(--text-muted);
  border-radius: var(--radius-full);
  animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: .4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* Mode toggle */
.mode-toggle {
  display: flex;
  gap: 0;
  margin: 16px 24px 0;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.mode-toggle button {
  flex: 1;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: calc(var(--radius-sm) - 3px);
  transition: all var(--transition);
}

.mode-toggle button.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* Guided questions */
/* Bouton d'accès à la fiche "connaissances révélées" (mode guidé) */
.btn-revealed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 8px;
  padding: 0;
  background: rgba(18,20,97,.06);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--navy, #121461);
  cursor: pointer;
  transition: all var(--transition);
}
.btn-revealed:hover { background: rgba(18,20,97,.12); }

/* Corps du popup "connaissances révélées" */
.modal-card-sm { max-width: 420px; }
.revealed-modal-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px;
}
.revealed-row { display: flex; gap: 8px; font-size: .88rem; line-height: 1.4; }
.revealed-key { flex: 0 0 110px; color: var(--text-muted, #6b7280); font-weight: 600; }
.revealed-val { flex: 1; color: var(--text); }
.revealed-empty { margin: 0; font-size: .85rem; font-style: italic; color: var(--text-muted, #6b7280); }

/* ── Popup décision d'achat (résultat avant diagnostic) ── */
.sale-decision-card {
  max-width: 440px;
  text-align: center;
  padding: 34px 30px 28px;
}
.sale-decision-card.pop { animation: salePop .38s cubic-bezier(.2,.9,.3,1.25); }
@keyframes salePop { from { transform: scale(.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sale-decision-icon {
  width: 88px; height: 88px; margin: 0 auto 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.sale-decision-icon svg { width: 46px; height: 46px; }
.sale-decision-card.ok .sale-decision-icon { background: rgba(34,197,94,.14); color: #16a34a; }
.sale-decision-card.partial .sale-decision-icon { background: rgba(245,158,11,.16); color: #d97706; }
.sale-decision-card.ko .sale-decision-icon { background: rgba(239,68,68,.13); color: #dc2626; }
.sale-decision-title { margin: 0 0 12px; font-size: 1.4rem; font-weight: 700; }
.sale-decision-card.ok .sale-decision-title { color: #16a34a; }
.sale-decision-card.partial .sale-decision-title { color: #d97706; }
.sale-decision-card.ko .sale-decision-title { color: #dc2626; }
.sale-decision-reaction {
  font-style: italic; color: var(--text); margin: 0 0 22px;
  font-size: .95rem; line-height: 1.55;
  padding: 12px 16px; background: rgba(0,0,0,.035); border-radius: var(--radius-sm);
}
.sale-decision-meta { margin-bottom: 24px; }
.sale-meta-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; margin-bottom: 7px; }
.sale-meta-label { color: var(--text-muted, #6b7280); }
.sale-meta-val { font-weight: 700; }
.sale-conf-bar { height: 8px; background: rgba(0,0,0,.08); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.sale-conf-fill { height: 100%; border-radius: 999px; width: 0; transition: width .7s cubic-bezier(.3,.8,.3,1); }
.sale-decision-card.ok .sale-conf-fill { background: #16a34a; }
.sale-decision-card.partial .sale-conf-fill { background: #d97706; }
.sale-decision-card.ko .sale-conf-fill { background: #dc2626; }
.sale-decision-continue { width: 100%; display: flex; align-items: center; justify-content: center; }

/* Pagination des listes (dashboards) */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 0 4px;
  grid-column: 1 / -1; /* s'étale sur toute la largeur dans un conteneur en grille */
}
.pg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
}
.pg-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.pg-info { font-size: .82rem; color: var(--text-muted); font-weight: 600; min-width: 52px; text-align: center; }

.guided-questions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 24px;
  flex-shrink: 0;
  border-top: 1px solid var(--border-light);
}

.guided-q {
  padding: 10px 16px;
  background: rgba(201,168,124,.08);
  border: 1px solid rgba(201,168,124,.25);
  border-radius: var(--radius-sm);
  font-size: .83rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition);
}

.guided-q:hover {
  border-color: var(--accent);
  background: rgba(201,168,124,.04);
}

.guided-q.frozen,
.guided-q.frozen:hover {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Proposition de produit : arguments (fond bleu nuit distinct) + chip du produit + retour arrière */
.guided-q.product-arg {
  background: rgba(18,20,97,.06);
  border-color: rgba(18,20,97,.22);
  border-left: 3px solid var(--navy, #121461);
}
.guided-q.product-arg:hover {
  background: rgba(18,20,97,.10);
  border-color: rgba(18,20,97,.4);
}
/* Même traitement visuel que le tag produit du mode libre (.product-tag) */
.arg-product-chip {
  display: inline-block;
  padding: 2px 10px;
  margin: 0 2px;
  background: var(--accent-light);
  color: var(--primary);
  border: 1px solid var(--accent);
  border-radius: 14px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: baseline;
  line-height: 1.5;
}
.guided-q.product-undo {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted, #6b7280);
  font-style: italic;
  text-align: center;
}
.guided-q.product-undo:hover {
  background: rgba(0,0,0,.03);
  border-color: var(--text-muted, #6b7280);
}

/* Chat input */
.chat-input-bar {
  display: flex;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* Contenteditable chat input */
.chat-input-editable {
  flex: 1;
  min-height: 42px;
  max-height: 120px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.chat-input-editable:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

.chat-input-editable:empty::before {
  content: attr(data-placeholder);
  color: var(--text-light);
  pointer-events: none;
}

.chat-input-bar {
  position: relative;
}

/* Product tag inline in contenteditable */
.product-tag {
  display: inline-block;
  padding: 2px 10px;
  background: var(--accent-light);
  color: var(--primary);
  border: 1px solid var(--accent);
  border-radius: 14px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: grab;
  user-select: all;
  vertical-align: baseline;
  line-height: 1.5;
  margin: 0 2px;
}

.product-tag:hover {
  background: var(--accent);
  color: #fff;
}

.product-tag[draggable="true"] {
  cursor: grab;
}

.product-tag:active {
  cursor: grabbing;
}

/* Product reference button */
.btn-product-ref {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
}

.btn-product-ref svg {
  width: 18px;
  height: 18px;
}

.btn-product-ref:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.btn-product-ref.active {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
}

/* Product reference popup */
.product-ref-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  animation: fadeIn .15s ease;
}

.product-ref-search {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.product-ref-search svg {
  width: 16px;
  height: 16px;
  color: var(--text-light);
  flex-shrink: 0;
}

.product-ref-search input {
  border: none !important;
  background: transparent !important;
  padding: 4px 0 !important;
  font-size: .85rem;
  box-shadow: none !important;
  outline: none !important;
}

.product-ref-list {
  overflow-y: auto;
  flex: 1;
}

.product-ref-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background var(--transition);
  border-bottom: 1px solid var(--border-light);
}

.product-ref-item:last-child {
  border-bottom: none;
}

.product-ref-item:hover {
  background: var(--surface-2);
}

.product-ref-item.already-added {
  opacity: .45;
  cursor: default;
}

.product-ref-item-img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-xs);
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border-light);
  flex-shrink: 0;
}

.product-ref-item-info {
  flex: 1;
  min-width: 0;
}

.product-ref-item-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-ref-item-cat {
  font-size: .72rem;
  color: var(--text-muted);
}

.product-ref-item-check {
  width: 18px;
  height: 18px;
  color: var(--success);
  flex-shrink: 0;
}

.product-ref-empty {
  padding: 20px;
  text-align: center;
  font-size: .82rem;
  color: var(--text-light);
}

.btn-mic {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.btn-mic svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.btn-mic:hover {
  background: var(--surface-2);
  color: var(--text);
}

.btn-mic.recording {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,48,37,.3); }
  50% { box-shadow: 0 0 0 8px rgba(217,48,37,0); }
}

/* ===== PRESCRIPTION ===== */

/* Filters */
.product-filters {
  margin-bottom: 16px;
}

.filter-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-search {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.filter-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-light);
  pointer-events: none;
}

.filter-search input {
  padding-left: 36px;
}

.filter-row select {
  min-width: 180px;
  width: auto;
}

/* Benefits filter */
.filter-benefits-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
}

.filter-benefits-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
}

.benefit-tag {
  padding: 3px 10px;
  font-size: .75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.benefit-tag:hover {
  border-color: var(--accent);
  color: var(--text);
}

.benefit-tag.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.filter-benefits-mode {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.benefit-mode-btn {
  padding: 3px 10px;
  font-size: .75rem;
  font-weight: 600;
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}

.benefit-mode-btn.active {
  background: var(--primary);
  color: #fff;
}

.selected-count {
  margin-top: 10px;
  font-size: .82rem;
  color: var(--text-muted);
}

.selected-count strong {
  color: var(--success);
}

/* Product grid */
.product-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.product-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.product-card.selected {
  border-color: var(--success);
  background: var(--success-light);
}

/* Produit déjà dans le panier : verrouillé (pastille panier, non modifiable) */
.product-card.in-basket {
  border-color: var(--accent);
  background: var(--accent-light);
  cursor: default;
}
.product-card.in-basket:hover {
  box-shadow: none;
  border-color: var(--accent);
}
.product-card .product-basket-badge {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-full);
  align-items: center;
  justify-content: center;
}
.product-card.in-basket .product-basket-badge { display: flex; }

.product-card .product-img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  background: #fff;
  border-bottom: 1px solid var(--border-light);
  padding: 8px;
}

.product-card .product-img-placeholder {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-light);
}

.product-card .product-img-placeholder svg {
  width: 32px;
  height: 32px;
}

.product-card .product-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card .product-name { font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--primary); }
.product-card .product-cat { font-size: .78rem; color: var(--text-muted); }
.product-card .product-concerns {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}
.product-card .product-price {
  font-size: .92rem;
  color: var(--accent-dark);
  font-weight: 600;
  margin-top: auto;
  padding-top: 10px;
}

.product-card .product-selected-badge {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: var(--success);
  border-radius: var(--radius-full);
  align-items: center;
  justify-content: center;
  color: #fff;
}

.product-card.selected .product-selected-badge {
  display: flex;
}

/* Product suggestion button in chat */
.product-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 14px;
  background: var(--accent-light);
  color: var(--primary);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.product-suggestion:hover {
  background: var(--accent);
  color: #fff;
}

.product-suggestion svg {
  width: 14px;
  height: 14px;
}

.product-suggestion.added {
  background: var(--success-light);
  border-color: var(--success);
  color: var(--success);
  cursor: default;
}

/* Catalogue inline preview (config screen) */
.catalogue-preview {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.catalogue-preview:empty {
  display: none;
}

/* catalogue-mini removed (unused) */

/* ===== DIAGNOSTIC ===== */
.diagnostic-main-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 28px;
  align-items: start;
}

.diagnostic-trainer {
  text-align: center;
}

.trainer-video-zone {
  width: 100%;
  aspect-ratio: 9/16;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  position: relative;
}

.trainer-static {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trainer-video-zone video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trainer-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.3);
  backdrop-filter: blur(8px);
  z-index: 2;
}

.trainer-loading .spinner {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.trainer-loading.hidden {
  display: none;
}

.trainer-video-zone.has-video {
  cursor: pointer;
}

.trainer-label {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 8px;
}

.diagnostic-feedback {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.diagnostic-score-block {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.score-ring {
  width: 110px;
  height: 110px;
  border-radius: var(--radius-full);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  gap: 0;
}

.score-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  border: 5px solid var(--border);
}

.score-top {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 2px;
}

.score-divider {
  width: 50px;
  height: 2px;
  background: currentColor;
  opacity: .35;
  border-radius: 1px;
}

.score-bottom {
  font-size: .85rem;
  font-weight: 600;
  opacity: .45;
  line-height: 1;
  margin-top: 2px;
}

.score-ring.excellent { color: var(--success); }
.score-ring.excellent::before { border-color: var(--success-light); }
.score-ring.good { color: var(--warning); }
.score-ring.good::before { border-color: var(--warning-light); }
.score-ring.poor { color: var(--error); }
.score-ring.poor::before { border-color: var(--error-light); }

/* ===== SCORE REVEAL SCREEN ===== */
.score-reveal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 24px;
}

.score-reveal-ring {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-full);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 0;
  transition: color .15s;
}

.score-reveal-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  border: 6px solid var(--border);
  transition: border-color .15s;
}

.score-reveal-ring.excellent { color: var(--success); }
.score-reveal-ring.excellent::before { border-color: var(--success-light); }
.score-reveal-ring.good { color: var(--warning); }
.score-reveal-ring.good::before { border-color: var(--warning-light); }
.score-reveal-ring.poor { color: var(--error); }
.score-reveal-ring.poor::before { border-color: var(--error-light); }

.score-reveal-value {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.score-reveal-divider {
  width: 70px;
  height: 2px;
  background: currentColor;
  opacity: .35;
  border-radius: 1px;
}

.score-reveal-bottom {
  font-size: 1.1rem;
  font-weight: 600;
  opacity: .45;
  line-height: 1;
  margin-top: 4px;
}

.score-reveal-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.score-reveal-container .score-reveal-ring {
  animation: scoreRevealPulse .6s ease-out;
}

@keyframes scoreRevealPulse {
  0% { transform: scale(.8); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.score-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-size: .8rem;
  flex: 1;
}

.score-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.score-detail-item .label {
  color: var(--text-muted);
}

.score-detail-item .value {
  font-weight: 600;
  color: var(--primary);
}

.diagnostic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.diagnostic-section {
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.diagnostic-list {
  list-style: none;
  padding: 0;
}

.diagnostic-list li {
  padding: 6px 0 6px 20px;
  position: relative;
  font-size: .84rem;
  line-height: 1.5;
}

.diagnostic-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
}

.diagnostic-list.positive li::before { background: var(--success); }
.diagnostic-list.negative li::before { background: var(--warning); }

.analysis-text {
  font-size: .85rem;
  line-height: 1.7;
  color: var(--text-muted);
  padding: 16px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* ===== LOADING OVERLAY ===== */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(250,250,250,.88);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  flex-direction: column;
  gap: 16px;
}

.loading-overlay.active { display: flex; }

.loading-overlay .spinner-lg {
  width: 44px;
  height: 44px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

.loading-overlay p {
  color: var(--text-muted);
  font-size: .92rem;
  font-weight: 500;
}

/* ===== TRANSCRIPT ===== */
.transcript-toggle {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 500;
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.transcript-toggle svg {
  width: 16px;
  height: 16px;
}

/* ===== HOME SCREEN ===== */
#screen-home.active {
  justify-content: center;
  align-items: center;
}

/* ===== SESSION HISTORY ===== */
.history-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
}

.history-item:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

.history-item + .history-item {
  border-top: 1px solid var(--border-light);
}

.history-info {
  flex: 1;
  min-width: 0;
}

.history-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-meta {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.history-score {
  font-size: .85rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 16px;
  flex-shrink: 0;
}

.history-score.excellent { background: var(--success-light); color: var(--success); }
.history-score.good { background: var(--warning-light); color: var(--warning); }
.history-score.poor { background: var(--error-light); color: var(--error); }

.history-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.history-badge.done {
  background: var(--success-light);
  color: var(--success);
  border-color: var(--success);
}

.history-delete {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: all var(--transition);
}

.history-delete:hover {
  background: var(--error-light);
  color: var(--error);
}

/* ===== PERSONA GRID (Home) ===== */
.persona-grid-home {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  padding: 12px 0;
}

.persona-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  position: relative;
  aspect-ratio: 7/11;
}

.persona-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.persona-card-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--border);
  margin-bottom: 12px;
}

.persona-card-avatar-placeholder {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 3px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  margin-bottom: 12px;
}

.persona-card-info {
  min-width: 0;
}

.persona-card-name {
  font-size: .88rem;
  font-weight: 600;
  color: var(--primary);
}

.persona-card-origin {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.persona-card-meta {
  font-size: .72rem;
  color: var(--text-light);
  margin-top: 4px;
}

.persona-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255,255,255,.85);
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  opacity: 0;
  transition: all var(--transition);
  z-index: 2;
}

.persona-card:hover .persona-card-delete {
  opacity: 1;
}

.persona-card-delete:hover {
  background: var(--error-light);
  color: var(--error);
}

/* ===== PERSONA DETAIL ===== */
.persona-detail-header {
  margin-bottom: 24px;
}

.persona-detail-top {
  display: flex;
  align-items: center;
  gap: 20px;
}

.persona-detail-avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--accent);
  flex-shrink: 0;
}

.persona-detail-avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 3px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  flex-shrink: 0;
}

.persona-detail-top h2 {
  font-size: 1.3rem;
  color: var(--primary);
  margin-bottom: 4px;
}

.persona-detail-top p {
  font-size: .85rem;
  color: var(--text);
}

/* ===== SETTINGS SCREEN — compact layout ===== */
#screen-config.active {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 40px;
  overflow-y: auto;
}

#screen-config .screen-centered {
  max-width: 960px;
  width: 100%;
}

#screen-config .screen-title {
  margin-bottom: 20px;
}

#screen-config .screen-title h2 {
  font-size: 1.2rem;
  margin-bottom: 4px;
}

#screen-config .card {
  padding: 20px;
  margin-bottom: 0;
  overflow: hidden;
}

#screen-config .card-header {
  margin-bottom: 14px;
}

#screen-config .settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

#screen-config .settings-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

#screen-config .drop-zone {
  padding: 20px;
}

#screen-config .drop-zone-icon svg {
  width: 24px;
  height: 24px;
}

#screen-config .drop-zone p {
  font-size: .82rem;
}

#screen-config .catalogue-preview {
  max-height: 90px;
  overflow: hidden;
}

/* ===== LIGHTBOX ===== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  cursor: pointer;
  animation: fadeIn .2s ease;
}

.lightbox-overlay.active {
  display: flex;
}

.lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 16px 64px rgba(0,0,0,.3);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: background .2s;
}

.lightbox-close:hover {
  background: rgba(255,255,255,.3);
}

/* Clickable thumbnails */
.image-thumb img,
.persona-detail-avatar,
.persona-card-avatar {
  cursor: pointer;
}

/* ===== PRESCRIPTION SUMMARY ===== */
/* Prescription layout: main full width, sidebar fixed in right margin */
.prescription-layout {
  position: relative;
}

.prescription-main {
  min-width: 0;
}

.prescription-sidebar {
  position: fixed;
  right: 24px;
  top: 80px;
  width: 260px;
  z-index: 10;
}

.prescription-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
}

.prescription-summary h4 {
  font-size: .85rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 8px;
}

.prescription-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.prescription-summary-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: .82rem;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-light);
}

.prescription-summary-list li:last-child {
  border-bottom: none;
}

.prescription-summary-list .summary-product-name {
  flex: 1;
  min-width: 0;
}

.prescription-summary-list .summary-product-price {
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 600;
}

.prescription-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: .92rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px solid var(--border);
}

.prescription-summary-empty {
  font-size: .82rem;
  color: var(--text-muted);
  text-align: center;
}

.prescription-back-fixed {
  position: fixed;
  left: 140px;
  top: 80px;
  z-index: 10;
}

.prescription-submit-btn {
  width: 100%;
  margin-top: 12px;
}

@media (max-width: 1400px) {
  .prescription-sidebar {
    right: 12px;
    width: 220px;
  }
  .prescription-back-fixed {
    left: 80px;
  }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .app-sidebar {
    width: 100%;
    height: 56px;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--border);
    order: -1;
    padding: 0 16px;
  }

  .sidebar-brand { margin-bottom: 0; margin-right: auto; }
  .sidebar-spacer { display: none; }

  .app-main { order: 1; }
  .app-layout { flex-direction: column; }

  .screen { padding: 20px 16px; }
  .app-header { padding: 16px 20px; }
}

/* ===== BRAND SELECTOR ===== */
/* Brand popup menu (triggered from sidebar logo) */
.brand-menu {
  display: none;
  position: fixed;
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,.16);
  padding: 6px;
  min-width: 200px;
}

.brand-menu.open { display: block; }

.brand-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: .88rem;
  color: var(--primary);
  white-space: nowrap;
  transition: background .1s;
}

.brand-menu-item:hover { background: var(--surface-2); }

.brand-menu-item.active {
  background: rgba(201,168,124,.12);
  font-weight: 600;
}

.brand-menu-item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
}

.brand-menu-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.brand-menu-initial {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-radius: 4px;
  font-weight: 700;
  font-size: .85rem;
  color: var(--primary-soft);
}

/* ===== HOME HERO BUTTONS ===== */
.home-hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-secondary {
  background: var(--surface);
  color: var(--primary);
  border: 2px solid var(--accent);
}

.btn-secondary:hover {
  background: rgba(201,168,124,.08);
}

/* ===== CUSTOM PERSONA BUILDER ===== */
.custom-persona-form {
  padding: 24px;
}

.custom-field {
  margin-bottom: 20px;
}

.custom-field label {
  display: block;
  font-weight: 600;
  font-size: .85rem;
  color: var(--primary);
  margin-bottom: 8px;
}

.tag-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: .82rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}

.tag-chip:hover {
  border-color: var(--accent-light);
  background: rgba(201,168,124,.06);
}

.tag-chip.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* ===== BRAND CONFIG PAGE ===== */
.brand-config-card .brand-config-body {
  display: none;
  padding: 0 16px 16px;
}

.brand-config-card.expanded .brand-config-body {
  display: block;
}

.brand-config-card .card-header {
  cursor: pointer;
}

.brand-asset-preview {
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  border-radius: var(--radius-xs);
  margin-bottom: 8px;
}

.brand-catalogue-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--surface-2);
  border-radius: var(--radius-xs);
  margin-bottom: 8px;
}

.brand-catalogue-preview img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.brand-catalogue-preview .brand-catalogue-info {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
}

.brand-catalogue-preview .brand-catalogue-info strong {
  display: block;
  color: var(--primary);
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== LOGIN SCREEN ===== */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  background: var(--bg);
}
.login-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 48px 40px;
  max-width: 420px;
  width: 90%;
  margin: 0 auto;
  text-align: center;
}
.login-logo {
  margin-bottom: 16px;
  color: var(--accent);
}
.login-card h2 {
  font-size: 1.5rem;
  color: var(--text);
  margin-bottom: 4px;
}
.login-subtitle {
  color: var(--text-muted);
  font-size: .9rem;
  margin-bottom: 28px;
}
.login-card .form-group {
  text-align: left;
  margin-bottom: 16px;
}
.login-card .form-group label {
  display: block;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}
.login-card .form-group input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-family: inherit;
  transition: border-color var(--transition);
}
.login-card .form-group input:focus {
  outline: none;
  border-color: var(--accent);
}
.login-error {
  color: var(--error);
  font-size: .85rem;
  min-height: 1.2em;
  margin-bottom: 8px;
}

/* ===== USER BADGE (header) ===== */
.user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
}
.user-badge-name {
  font-weight: 600;
  color: var(--text);
}
.btn-impersonate-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  z-index: 10;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.btn-impersonate-back svg { pointer-events: none; }
.btn-impersonate-back:hover { color: var(--text); border-color: var(--text-muted); background: var(--bg-muted, #f3f4f6); }
.user-badge-role {
  color: var(--text-muted);
  font-size: .8rem;
}

/* ===== USERS ACCORDION ===== */
.accordion-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition);
  user-select: none;
}
.accordion-toggle:hover { background: var(--surface-2); }
.accordion-arrow {
  display: flex;
  transition: transform .2s ease;
  color: var(--text-muted);
  flex-shrink: 0;
}
.accordion-toggle.open > .accordion-arrow {
  transform: rotate(90deg);
}
.accordion-body {
  display: none;
}
.accordion-body.open {
  display: block;
}
.accordion-name {
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
}
.accordion-email {
  font-size: .82rem;
  color: var(--text-muted);
}
.accordion-meta {
  font-size: .78rem;
  color: var(--text-muted);
  margin-left: auto;
  margin-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.accordion-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition);
}
.accordion-toggle:hover .accordion-actions,
.user-row:hover .accordion-actions {
  opacity: 1;
}
.user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition);
}
.user-row:hover { background: var(--surface-2); }
/* ===== TREE VIEW ===== */
.accordion-body {
  position: relative;
  --tree-x: 23px;
}
.accordion-body .accordion-body { --tree-x: 47px; }
.accordion-body .accordion-body .accordion-body { --tree-x: 71px; }

/* Vertical line */
.accordion-body::before {
  content: '';
  position: absolute;
  left: var(--tree-x);
  top: 0;
  bottom: 14px;
  border-left: 1.5px solid var(--border);
  pointer-events: none;
  z-index: 0;
}
/* Horizontal branches on direct children */
.accordion-body > .accordion-toggle,
.accordion-body > .user-row {
  position: relative;
}
.accordion-body > .accordion-toggle::after,
.accordion-body > .user-row::after {
  content: '';
  position: absolute;
  left: var(--tree-x);
  top: 50%;
  width: 14px;
  border-top: 1.5px solid var(--border);
  pointer-events: none;
}

/* ── Add button (terminal node) ── */
.accordion-add-bar {
  position: relative;
}
.accordion-add-bar {
  padding-left: 0 !important;
}
.tree-add-node {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 0 2px;
  position: relative;
  margin-left: var(--tree-x, 23px);
}
.tree-add-node::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 50%;
  border-left: 1.5px solid var(--border);
}
.tree-add-node::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  border-top: 1.5px solid var(--border);
}
.tree-add-btn {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 600;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), box-shadow var(--transition);
  line-height: 1;
  margin-left: 14px;
  position: relative;
  z-index: 1;
}
.tree-add-node:hover .tree-add-btn {
  border-color: var(--accent);
  color: var(--accent-dark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.tree-add-node:hover::before,
.tree-add-node:hover::after {
  border-color: var(--accent);
}
.accordion-orphans {
  margin-top: 12px;
  border-top: 2px dashed var(--border);
  padding-top: 8px;
}
.accordion-orphans-label {
  font-size: .78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 4px 16px 8px;
}
.role-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-lg);
  font-size: .72rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--role-color) 12%, transparent);
  color: var(--role-color);
}

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 32px;
  max-width: 720px;
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.modal-header h3 {
  font-size: 1.15rem;
  color: var(--text);
}
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: var(--radius-xs);
  transition: color var(--transition);
}
.modal-close:hover { color: var(--text); }
.modal-card .form-group {
  margin-bottom: 16px;
}
.modal-card .form-group label {
  display: block;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}
.modal-card .form-group input,
.modal-card .form-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-family: inherit;
  transition: border-color var(--transition);
  background: var(--surface);
}
.modal-card .form-group input:focus,
.modal-card .form-group select:focus {
  outline: none;
  border-color: var(--accent);
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.form-row-2 > .form-group[style*="display: none"] + .form-group,
.form-row-2 > .form-group:only-child {
  grid-column: 1 / -1;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

/* ===== BTN GHOST / SM ===== */
.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition: color var(--transition), background var(--transition);
}
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }
.btn-sm { font-size: .82rem; padding: 4px 8px; }

/* ===== LANG SELECTOR ===== */
.lang-selector {
  display: flex;
  justify-content: center;
  padding: 8px 0;
  position: relative;
}
.lang-current {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lang-current svg { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.lang-current:hover { background: var(--surface-2); }
.lang-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 200;
  flex-direction: column;
  gap: 2px;
}
.lang-selector.open .lang-dropdown {
  display: flex;
}
.lang-option {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.lang-option svg { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.lang-option:hover { background: var(--surface-2); }

/* Active session pulse on nav button */
.nav-session-active {
  animation: session-pulse 2s ease-in-out infinite;
}
.nav-session-active svg { stroke: var(--success); }
@keyframes session-pulse {
  0%, 100% { background: transparent; }
  50% { background: color-mix(in srgb, var(--success) 15%, transparent); }
}

/* ===== TRAINING SERVICE CARDS ===== */
.ts-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.ts-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.ts-card-name {
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
}
.ts-card-meta {
  display: flex;
  gap: 12px;
  font-size: .82rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.ts-region-badge {
  background: var(--accent-light);
  color: var(--accent-dark);
  padding: 1px 8px;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 500;
}

/* ===== MEMBER ROWS ===== */
.member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.member-row:last-child { border-bottom: none; }
.member-name {
  font-weight: 500;
  font-size: .9rem;
  color: var(--text);
}
.member-email {
  font-size: .82rem;
  color: var(--text-muted);
  flex: 1;
}
.member-row .btn-ghost {
  opacity: 0;
  transition: opacity var(--transition);
}
.member-row:hover .btn-ghost { opacity: 1; }

/* ===== CHECKBOX LIST ===== */
.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 160px;
  overflow-y: auto;
}
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: var(--text);
  cursor: pointer;
}
.checkbox-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

/* ===== CHECKLIST DROPDOWN (filterable multi-select) ===== */
.checklist-dropdown {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.checklist-filter {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--border-light);
  font-size: .9rem;
  font-family: inherit;
  outline: none;
  background: var(--surface);
}
.checklist-filter:focus {
  background: var(--surface-2);
}
.checklist-options {
  max-height: 150px;
  overflow-y: auto;
  padding: 4px 0;
  flex-shrink: 1;
}
.checklist-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: .88rem;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition);
}
.checklist-options label:hover {
  background: var(--surface-2);
}
.checklist-options label.hidden,
.checklist-options label.hidden-by-battle {
  display: none;
}
.checklist-options input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.checklist-separator {
  padding: 8px 12px 4px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  border-top: 1px solid var(--border-light);
  margin-top: 4px;
}
.region-count {
  color: var(--text-muted);
  font-weight: 400;
  font-size: .82rem;
}

/* ===== CUSTOM SELECT ===== */
.custom-select {
  position: relative;
  width: 100%;
}
.custom-select-display {
  padding: 10px 36px 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--transition);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-select-display::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-muted);
  pointer-events: none;
}
.custom-select.open .custom-select-display {
  border-color: var(--accent);
}
.custom-select.open .custom-select-display::after {
  border-top: none;
  border-bottom: 5px solid var(--accent);
}
.custom-select.disabled .custom-select-display {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: default;
}
.custom-select.disabled .custom-select-display::after {
  opacity: 0.3;
}
.custom-select-dropdown {
  display: none;
  position: absolute;
  z-index: 200;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-height: 180px;
  overflow-y: auto;
}
/* Default: open downward */
.custom-select-dropdown { top: calc(100% + 4px); bottom: auto; }
/* Flip upward when flagged */
.custom-select.drop-up .custom-select-dropdown { top: auto; bottom: calc(100% + 4px); }
.custom-select.open .custom-select-dropdown {
  display: block;
}
.custom-select-option {
  padding: 9px 14px;
  font-size: .9rem;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition);
}
.custom-select-option:hover {
  background: var(--surface-2);
}
.custom-select-option.selected {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-dark);
  font-weight: 500;
}
.custom-select-locked .custom-select-display {
  background: var(--surface-2);
  color: var(--text);
  cursor: default;
  font-weight: 500;
}
.custom-select-locked .custom-select-display::after {
  display: none;
}

/* ===== TOGGLE GROUP ===== */
.toggle-group {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.toggle-btn {
  padding: 8px 14px;
  font-size: .9rem;
  font-family: inherit;
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.toggle-btn + .toggle-btn {
  border-left: 1px solid var(--border);
}
.toggle-btn.active {
  background: var(--primary);
  color: #fff;
}
.toggle-btn:hover:not(.active) {
  background: var(--surface-2);
}

/* ===== CHECKBOX GRID ===== */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 180px;
  overflow-y: auto;
  flex-shrink: 0;
}
.checkbox-grid .checkbox-item {
  font-size: .85rem;
}

/* ===== SESSION PAGE (full page layout with tabs + sticky footer) ===== */
.session-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.session-page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}
.session-page-header h2 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
}
.session-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  padding: 0 24px;
  flex-shrink: 0;
}
.session-tab {
  padding: 10px 20px;
  font-size: .9rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.session-tab:hover { color: var(--text); }
.session-tab.active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}
.session-tab-content {
  display: none;
}
.session-page-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.session-footer-actions {
  display: flex;
  gap: 8px;
}

/* Session form grid (2 columns) */
.session-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  height: 100%;
}
.session-form-col {
  min-width: 0;
}
#tab-participants .session-form-col,
#tab-type .session-form-col:last-child {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#tab-type .session-form-col:last-child .checklist-dropdown {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#tab-type .session-form-col:last-child .checklist-options {
  flex: 1;
  max-height: none;
}
/* Type tab: left column is flex so type list + description fill height exactly */
#tab-type .session-form-col:first-child {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#tab-type .session-form-col:first-child .form-group {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Make tab content fill available space */
.session-tab-content.active {
  display: block;
  height: 100%;
}
.session-page-body > .session-tab-content.active {
  overflow: hidden;
}
.session-page-body {
  flex: 1;
  overflow: hidden;
  padding: 20px 24px;
  min-height: 0;
}
/* Recap tab scrolls independently */
#tab-recap {
  overflow-y: auto;
}

/* Session type cards */
.session-type-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.session-type-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  font-size: .88rem;
  color: var(--text);
}
.session-type-card:hover {
  border-color: var(--accent-light);
  background: var(--surface-2);
}
.session-type-card.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-weight: 500;
}
.session-type-card .type-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
  flex-shrink: 0;
  opacity: 0;
}
.session-type-card.selected .type-dot {
  opacity: 1;
}

/* Session type description */
.session-type-desc {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  flex-shrink: 0;
}
/* Products group fills remaining height in type tab right col */
#sc-products-group {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#sc-products-group .checklist-dropdown {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#sc-products-group .checklist-options {
  flex: 1;
  max-height: none;
}
.session-type-desc h4 {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.session-type-desc p {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Learners list */
.sc-learners-list {
  max-height: 260px;
}
.learner-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.learner-name {
  font-weight: 500;
  white-space: nowrap;
}
.learner-score {
  font-size: .72rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.learner-score.good { background: var(--success-light); color: var(--success); }
.learner-score.mid { background: var(--warning-light); color: var(--gold-dark); }
.learner-score.low { background: var(--error-light); color: var(--error); }
.learner-score.none { color: var(--text-light); }
.learner-weak {
  font-size: .7rem;
  color: var(--error);
  opacity: .7;
  white-space: nowrap;
  flex-shrink: 0;
}
.learner-meta {
  font-size: .7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: auto;
}

/* Recap */
/* Groups management */
.sc-groups-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.sc-groups-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc-group-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.sc-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-light);
}
.sc-group-header input {
  border: none;
  background: transparent;
  font-size: .88rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  width: 140px;
  outline: none;
}
.sc-group-header .group-count {
  font-size: .78rem;
  color: var(--text-muted);
}
.sc-group-members {
  padding: 6px 8px;
  min-height: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sc-group-member {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 12px;
  font-size: .78rem;
  color: var(--accent-dark);
}
.sc-group-member button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: .7rem;
  padding: 0 2px;
  line-height: 1;
}
.sc-group-member button:hover { color: var(--error); }
.sc-group-empty {
  color: var(--text-light);
  font-size: .82rem;
  font-style: italic;
  padding: 4px;
}
.sc-group-add-btn {
  padding: 4px 8px;
  margin: 4px 8px 8px;
  font-size: .78rem;
  font-family: inherit;
  color: var(--accent-dark);
  background: none;
  border: 1px dashed var(--accent-light);
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.sc-group-add-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Recap: 2-column card layout */
.recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.recap-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.recap-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.recap-card-title {
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}
.recap-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: .88rem;
}
.recap-row .recap-label {
  color: var(--text-muted);
  font-size: .84rem;
}
.recap-row .recap-value {
  color: var(--text);
  font-weight: 500;
  text-align: right;
}
.recap-type-name {
  font-weight: 600;
  font-size: .95rem;
  color: var(--accent-dark);
  margin-bottom: 6px;
}
.recap-type-desc {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.recap-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.recap-group {
  margin-bottom: 10px;
}
.recap-group-name {
  font-weight: 600;
  font-size: .88rem;
  color: var(--text);
  margin-bottom: 4px;
}
.recap-group-members {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.recap-learner-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ===== LEARNER DASHBOARD ===== */
.learner-hero {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.learner-hero-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.learner-hero-card.learner-hero-grade {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
}
/* Metal gradients per grade */
.learner-hero-grade.grade-1 { background: linear-gradient(145deg, #6b3a2a, #b87333, #d4956b, #b87333, #8b4c2a); border: 1px solid #b87333; }
.learner-hero-grade.grade-2 { background: linear-gradient(145deg, #6b6b6b, #b8b8b8, #d8d8d8, #b8b8b8, #8a8a8a); border: 1px solid #a8a8a8; }
.learner-hero-grade.grade-3 { background: linear-gradient(145deg, #8b6914, #d4a520, #ffd700, #d4a520, var(--gold-dark)); border: 1px solid #daa520; }
.learner-hero-grade.grade-4 { background: linear-gradient(145deg, #9a9488, #d4cfc4, #ece8de, #d4cfc4, #a8a298); border: 1px solid #c8c2b6; }
.learner-hero-grade.grade-5 { background: linear-gradient(145deg, #0a0a0a, #1a1a1a, #2a2a2a, #111, #050505); border: 1px solid #333; }

/* Inset text effect (debossed) for grades 1-4 */
.learner-hero-grade.grade-1 .ld-grade-name,
.learner-hero-grade.grade-1 .ld-arc-star { color: rgba(0,0,0,.5); text-shadow: 0 1px 1px rgba(255,200,150,.4); }
.learner-hero-grade.grade-2 .ld-grade-name,
.learner-hero-grade.grade-2 .ld-arc-star { color: rgba(0,0,0,.4); text-shadow: 0 1px 1px rgba(255,255,255,.5); }
.learner-hero-grade.grade-3 .ld-grade-name,
.learner-hero-grade.grade-3 .ld-arc-star { color: rgba(80,50,0,.5); text-shadow: 0 1px 1px rgba(255,230,120,.5); }
.learner-hero-grade.grade-4 .ld-grade-name,
.learner-hero-grade.grade-4 .ld-arc-star { color: rgba(0,0,0,.35); text-shadow: 0 1px 1px rgba(255,255,255,.6); }

/* Gold gradient text for obsidian (grade 5) */
.learner-hero-grade.grade-5 .ld-grade-name {
  background: linear-gradient(180deg, #ffd700, var(--gold-dark), #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.learner-hero-grade.grade-5 .ld-arc-star {
  background: linear-gradient(180deg, #ffd700, var(--gold-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ld-grade-icon {
  margin-bottom: -10px;
}
.ld-grade-arc {
  position: relative;
  width: 80px;
  height: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.ld-arc-star {
  position: absolute;
  font-size: 1rem;
  line-height: 1;
}
.ld-arc-star.empty { color: rgba(255,255,255,.15); }
.learner-hero-grade.grade-5 .ld-arc-star.empty { color: rgba(255,255,255,.1); }
.ld-grade-name {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 2px;
}
.learner-hero-card.learner-hero-score {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.learner-hero-card.learner-hero-score .learner-hero-label {
  color: rgba(255,255,255,.7);
}
.learner-hero-label {
  font-size: .78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 4px;
}
.learner-hero-value {
  font-size: 1.8rem;
  font-weight: 700;
}
.learner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Planning items */
.ld-planning-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.ld-planning-item:last-child { border-bottom: none; }
.ld-planning-date {
  text-align: center;
  min-width: 50px;
  flex-shrink: 0;
}
.ld-planning-date .day {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.ld-planning-date .month {
  font-size: .72rem;
  color: var(--text-muted);
  text-transform: uppercase;
}
.ld-planning-info {
  flex: 1;
  min-width: 0;
}
.ld-planning-name {
  font-weight: 500;
  font-size: .88rem;
  color: var(--text);
}
.ld-planning-meta {
  font-size: .78rem;
  color: var(--text-muted);
}

/* Recent session items */
.ld-session-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.ld-session-item:last-child { border-bottom: none; }
.ld-session-score {
  font-size: 1.1rem;
  font-weight: 700;
  min-width: 48px;
  text-align: center;
  flex-shrink: 0;
}
.ld-session-score.good { color: var(--success); }
.ld-session-score.mid { color: var(--gold-dark); }
.ld-session-score.low { color: var(--error); }
.ld-session-info {
  flex: 1;
  min-width: 0;
}
.ld-session-name {
  font-weight: 500;
  font-size: .88rem;
  color: var(--text);
}
.ld-session-meta {
  font-size: .78rem;
  color: var(--text-muted);
}
.ld-retake-badge {
  font-size: .68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent-dark);
}

/* Journal table */
.journal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.journal-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.journal-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border-light);
}
/* ===== SCORE DISPLAY COMPONENTS ===== */

/* Score pill — for tables/lists */
.score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  border-radius: var(--radius-lg);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  min-width: 52px;
}
.score-pill.score-good { background: var(--success-light); color: var(--success); }
.score-pill.score-mid { background: var(--warning-light); color: var(--gold-dark); }
.score-pill.score-low { background: var(--error-light); color: var(--error); }
.score-pill.score-none { background: var(--surface-2); color: var(--text-muted); }

/* Score ring — for dashboards/cartouches (SVG-based) */
.score-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.score-ring svg { transform: rotate(-90deg); }
.score-ring-text {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.score-ring-value {
  font-weight: 700;
}
.score-ring-max {
  font-size: .55em;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ===== UNIFIED TABLE STYLES ===== */
/* Numeric cells: centered */
.journal-table td.tc, .journal-table th.tc,
.td-sessions-table td.tc, .td-sessions-table th.tc { text-align: center; }
/* Icon-only columns: no header text, centered */
.journal-table th.t-icon, .td-sessions-table th.t-icon { width: 40px; text-align: center; }
.journal-table td.t-actions, .td-sessions-table td.t-actions {
  text-align: right;
  white-space: nowrap;
  padding-right: 4px;
}
/* Override old auto-center */
.journal-table td, .journal-table th,
.td-sessions-table td, .td-sessions-table th { text-align: left; }
.journal-table tr:hover td { background: var(--surface-2); }

/* AI Synthesis */
.ld-synthesis-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ld-synthesis-block h4 {
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.ld-synthesis-block p {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.ld-synthesis-block.strong h4 { color: var(--success); }
.ld-synthesis-block.weak h4 { color: var(--error); }

/* Skill badges */
.skill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  font-size: .78rem;
  font-weight: 500;
  margin: 2px;
}
.skill-badge.strong { background: var(--success-light); color: var(--success); }
.skill-badge.weak { background: var(--error-light); color: var(--error); }

/* ===== EXPERT COACHING ===== */
.expert-refresh-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition), background var(--transition);
  z-index: 1;
}
.expert-refresh-btn:hover { color: var(--accent); background: var(--surface-2); }

.expert-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.expert-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--accent);
}
.expert-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.expert-greeting {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  padding: 12px 16px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  margin-bottom: 16px;
}
.expert-section {
  margin-bottom: 16px;
}
.expert-section-title {
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.expert-section-title svg { flex-shrink: 0; }
.expert-text {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text);
}
.expert-pattern {
  padding: 8px 14px;
  margin-bottom: 6px;
  background: var(--surface-2);
  border-radius: var(--radius-xs);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text);
  border-left: 2px solid var(--accent-light);
}
.expert-action {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.expert-action-title {
  font-weight: 600;
  font-size: .9rem;
  color: var(--accent-dark);
  margin-bottom: 4px;
}
.expert-action-why {
  font-size: .82rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.5;
}
.expert-action-exercise {
  font-size: .85rem;
  color: var(--text);
  padding: 8px 12px;
  background: var(--success-light);
  border-radius: var(--radius-xs);
  line-height: 1.5;
}
.expert-close {
  font-size: .95rem;
  font-style: italic;
  color: var(--accent-dark);
  padding: 12px 16px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: var(--radius-sm);
  line-height: 1.5;
}
.expert-meta {
  font-size: .72rem;
  color: var(--text-light);
  margin-top: 12px;
  text-align: right;
}

/* ===== GLOBAL DASHBOARD ===== */
.gd-worldmap-container {
  padding: 0 20px;
  overflow: hidden;
}
.world-map-svg {
  width: 100%;
  height: auto;
}
.world-map-svg path {
  transition: fill .2s, opacity .2s;
}
.gd-map-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 8px 20px 16px;
}
.gd-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--text-muted);
}
.gd-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid;
}
.gd-map-tooltip {
  display: none;
  position: fixed;
  z-index: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-lg);
  padding: 8px 12px;
  font-size: .82rem;
  line-height: 1.5;
  pointer-events: none;
}
/* gd-regional-* removed (unused) */

/* Bar chart rows */
.gd-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.gd-bar-label { font-size: .82rem; color: var(--text); min-width: 120px; }
.gd-bar-track { flex: 1; height: 16px; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.gd-bar-fill { height: 100%; background: var(--accent); border-radius: 8px; transition: width .3s; }
.gd-bar-value { font-size: .82rem; font-weight: 600; color: var(--text); min-width: 30px; text-align: right; }

/* Product rows */
.gd-product-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.gd-product-row:last-child { border-bottom: none; }
.gd-product-rank { font-weight: 700; font-size: .82rem; color: var(--accent); min-width: 28px; }
.gd-product-id { flex: 1; font-size: .85rem; color: var(--text); }
.gd-product-count { font-size: .82rem; color: var(--text-muted); }

/* Regional dashboard: rd-top-* and rd-trainer-* removed (unused) */

/* ===== TRAINER DASHBOARD ===== */
.td-schedule-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}
.td-schedule-card:last-child { border-bottom: none; }
.td-schedule-name { font-weight: 600; font-size: .9rem; color: var(--text); }
.td-schedule-meta { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.td-schedule-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Sessions table */
.td-sessions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.td-sessions-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
}
.td-sessions-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
/* removed — now using .tc class explicitly */
.td-sessions-table tr:hover td { background: var(--surface-2); }
.td-actions-cell {
  white-space: nowrap;
  text-align: right !important;
}
.td-icon-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition), background var(--transition);
}
.td-icon-btn:hover { color: var(--text); background: var(--surface-2); }
.td-icon-btn.disabled {
  opacity: .25;
  cursor: default;
  pointer-events: none;
}
.td-icon-btn.td-icon-danger:hover { color: var(--error); background: var(--error-light); }

/* ===== SCHEDULE SESSION ===== */
.sched-date-grid { display: grid; grid-template-columns: 1fr 280px; gap: 24px; }
.sched-calendar-wrap { min-width: 0; }
.sched-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sched-cal-title { font-weight: 600; font-size: 1rem; text-transform: capitalize; }
.sched-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sched-cal-head { text-align: center; font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; padding: 4px; }
.sched-cal-day { text-align: center; padding: 10px 4px; border-radius: var(--radius-xs); font-size: .88rem; cursor: pointer; transition: background var(--transition), color var(--transition); position: relative; }
.sched-cal-day:hover { background: var(--surface-2); }
.sched-cal-day.out-of-range { color: var(--text-light); cursor: default; opacity: .4; }
.sched-cal-day.out-of-range:hover { background: none; }
.sched-cal-day.today { font-weight: 700; color: var(--accent-dark); }
.sched-cal-day.selected { background: var(--primary); color: #fff; border-radius: var(--radius-xs); }
.sched-cal-day.has-session::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--accent); }
.sched-cal-day.selected.has-session::after { background: #fff; }
.sched-cal-hint { font-size: .78rem; color: var(--text-muted); margin-top: 8px; }

.sched-time-wrap { padding-top: 8px; }
.sched-selected-date { font-size: 1.1rem; font-weight: 600; color: var(--text); }
.sched-time-row { display: flex; align-items: center; gap: 6px; }
.sched-time-input { width: 60px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; text-align: center; }

/* Filters */
.sched-filters { margin-bottom: 12px; padding: 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
.sched-filters .form-group { margin-bottom: 10px; }
.sched-filters .form-group:last-child { margin-bottom: 0; }
.sched-slider-row { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-muted); }
.sched-slider { flex: 1; accent-color: var(--accent); }
.sched-tag-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.sched-tag-btn { padding: 2px 8px; font-size: .75rem; font-family: inherit; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.sched-tag-btn.active { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); border-color: var(--error); }
.sched-search-input { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .85rem; font-family: inherit; }

/* ===== PERSONAS GALLERY ===== */
.persona-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.pg-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.pg-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.pg-avatar { aspect-ratio: 1; background: var(--surface-2); overflow: hidden; }
.pg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pg-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-light);
}
.pg-info { padding: 8px 10px; }
.pg-name { font-weight: 600; font-size: .85rem; color: var(--text); }
.pg-origin { font-size: .78rem; color: var(--text-muted); }
.pg-meta { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.pg-product { font-size: .72rem; color: #f59e0b; margin-top: 2px; font-weight: 500; }
.pg-session { font-size: .68rem; color: var(--accent-dark); margin-top: 4px; font-style: italic; }

/* ===== PERSONA CONFIG ===== */
.pc-session-bar {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: .85rem;
  color: var(--text-muted);
  display: flex;
  gap: 16px;
  align-items: center;
}
.pc-session-bar strong { color: var(--text); }
.pc-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.pc-option-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.pc-option-card.locked {
  opacity: .5;
  pointer-events: none;
}
.pc-option-card.locked::after {
  content: '🔒';
  float: right;
  font-size: .8rem;
}
.pc-option-label {
  font-weight: 600;
  font-size: .82rem;
  color: var(--text);
  margin-bottom: 8px;
}
.pc-option-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pc-choice {
  padding: 4px 10px;
  font-size: .78rem;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.pc-choice:hover { border-color: var(--accent); color: var(--text); }
.pc-choice.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pc-choice.pc-indifferent.active {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--accent-light);
  font-style: italic;
}
.pc-choice.pc-locked {
  background: var(--surface-2);
  color: var(--text-light);
  border-color: var(--border-light);
  cursor: not-allowed;
}
.pc-gen-info {
  margin-top: 16px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  color: var(--accent-dark);
}

/* ===== PERSONA CAROUSEL ===== */
.carousel-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
}
.carousel-persona-card {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
}
.cpc-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cpc-avatar {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
  flex-shrink: 0;
}
.cpc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cpc-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-light);
}
.cpc-avatar-loading {
  flex-direction: column;
  font-size: 1rem;
  color: var(--text-muted);
}
.spinner-sm {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cpc-identity h3 { font-size: 1.2rem; margin-bottom: 4px; }
.cpc-identity p { font-size: .85rem; color: var(--text-muted); margin-bottom: 2px; }
.cpc-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cpc-detail {
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-xs);
}
.cpc-detail-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.cpc-detail-value { font-size: .88rem; color: var(--text); font-weight: 500; }
.cpc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.cpc-tag { padding: 2px 10px; border-radius: 12px; font-size: .75rem; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-dark); }

/* Mini calendar */
.ls-cal-grid {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 4px;
}
.ls-cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px;
  border-radius: var(--radius-xs);
  font-size: .72rem;
  position: relative;
  transition: background var(--transition);
}
.ls-cal-day.today {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-xs);
}
.ls-cal-day.has-session {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.ls-cal-day.today.has-session {
  background: var(--primary);
}
.ls-cal-dayname {
  font-size: .6rem;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}
.ls-cal-day.today .ls-cal-dayname { color: rgba(255,255,255,.6); }
.ls-cal-num {
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.3;
}
.ls-cal-dot {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.ls-cal-day.today .ls-cal-dot { background: #fff; color: var(--primary); }

/* Join card */
.ls-join-card {
  border-left: 4px solid var(--success);
}

/* History items */
.ls-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}
.ls-history-item:last-child { border-bottom: none; }
.ls-history-score-col {
  min-width: 60px;
  text-align: center;
  flex-shrink: 0;
}
.ls-retake-score {
  font-size: .72rem;
  color: var(--accent-dark);
  margin-top: 2px;
}
.ls-history-info {
  flex: 1;
  min-width: 0;
}
.ls-history-name {
  font-weight: 500;
  font-size: .9rem;
  color: var(--text);
}
.ls-history-meta {
  font-size: .78rem;
  color: var(--text-muted);
}
.btn-replay-session {
  flex-shrink: 0;
}

/* Session popover */
.session-popover {
  display: none;
  position: fixed;
  z-index: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px;
  max-width: 340px;
  min-width: 260px;
  pointer-events: auto;
}
.pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: .9rem;
}
.pop-mystery {
  color: var(--text-muted);
  font-size: .82rem;
  font-style: italic;
}
.pop-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pop-row {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
}
.pop-row .pop-label {
  color: var(--text-muted);
}
.pop-row span:last-child {
  font-weight: 500;
  color: var(--text);
  text-align: right;
}
.pop-criteria {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.ls-hover-session {
  cursor: default;
}

.ld-radar-legend {
  display: flex;
  gap: 20px;
  margin-top: 8px;
}
.ld-radar-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--text-muted);
}
.ld-radar-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  display: inline-block;
}

/* ── Product display (persona config + carousel) ── */
.pc-products-section {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--bg-muted);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.pc-products-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pc-product-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .82rem;
}
.pc-product-step {
  font-size: .7rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: .03em;
}
.pc-product-name { font-weight: 500; }
.pc-product-price { color: var(--text-muted); font-size: .78rem; }

.cpc-products-routine {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.cpc-routine-product {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--bg-muted);
  border-radius: 6px;
  font-size: .8rem;
}
.cpc-routine-product.cpc-hero-product {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
}
.cpc-routine-step {
  font-size: .68rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: .03em;
  min-width: 60px;
}
.cpc-routine-name { font-weight: 500; flex: 1; }
.cpc-routine-price { color: var(--text-muted); font-size: .78rem; }

/* ── Session Basket ── */
/* Basket dropdown controls in chat-zone-header */
.basket-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.basket-pill {
  position: relative;
}
.basket-pill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 20px;
  background: var(--surface-soft, #f4f4f7);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  transition: background .15s, border-color .15s;
}
.basket-pill-toggle:hover { background: var(--bg, #ececf0); }
.basket-pill[data-open="true"] .basket-pill-toggle {
  background: var(--bg, #ececf0);
  border-color: var(--primary);
}
.basket-pill-arrow { transition: transform .2s ease; }
.basket-pill[data-open="true"] .basket-pill-arrow { transform: rotate(180deg); }

.basket-pill-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.12));
  padding: 14px;
  z-index: 50;
}
.basket-pill-dropdown[hidden] { display: none; }

.basket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.basket-header h4 { font-size: .85rem; font-weight: 600; color: var(--text); }
.basket-total { font-size: .88rem; font-weight: 700; color: var(--accent-dark, var(--primary)); }
.basket-items { max-height: 260px; overflow-y: auto; }
.basket-empty { color: var(--text-muted); font-size: .8rem; text-align: center; padding: 8px 0; }
.basket-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: .82rem;
}
.basket-item:last-child { border-bottom: none; }
.basket-item-name { flex: 1; font-weight: 500; }
.basket-item-price { color: var(--text-muted); margin: 0 8px; white-space: nowrap; }
.basket-item-remove {
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: 2px;
  transition: color var(--transition);
}
.basket-item-remove:hover { color: var(--error); }
.basket-conclude-btn {
  width: 100%;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.basket-conclude-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Cultural Guidelines ── */
.cultural-text {
  font-size: .88rem;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
}

/* ===== Organisations (administration plateforme) ===== */

.liste-vide {
  color: var(--text-muted);
  font-size: .85rem;
  text-align: center;
  padding: 20px;
}

.etat-vide {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: .875rem;
  line-height: 1.6;
}
.etat-vide strong { color: var(--text); }

.org-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-light);
}
.org-ligne:last-child { border-bottom: none; }
.org-ligne:hover { background: var(--surface-2); }

/* Une organisation suspendue reste lisible mais visiblement en retrait. */
.org-suspendue { opacity: .55; }

.org-nom {
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.org-etiquette {
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--warning);
  background: var(--warning-light);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}

.org-detail {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 3px;
}
.org-detail code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-size: .75rem;
}

.org-actions { display: flex; gap: 8px; flex-shrink: 0; }

.btn-danger-ghost {
  background: transparent;
  color: var(--error);
  border: 1px solid transparent;
}
.btn-danger-ghost:hover {
  background: var(--error-light);
  border-color: var(--error);
}

.org-formulaire {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-bottom: 16px;
  background: var(--surface);
}
.org-formulaire h4 { margin: 0 0 16px; color: var(--text); }
.org-formulaire small {
  display: block;
  margin-top: 4px;
  font-size: .75rem;
  color: var(--text-muted);
}

.champ-facultatif {
  font-weight: 400;
  font-size: .75rem;
  color: var(--text-light);
}

.org-separateur {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 20px 0 16px;
}

.org-note {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 16px;
}

.org-boutons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.org-succes {
  border: 1px solid var(--success);
  background: var(--success-light);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-bottom: 16px;
}
.org-succes h4 { margin: 0 0 10px; color: var(--text); }
.org-succes p { font-size: .875rem; line-height: 1.55; }

/* Le lien d'activation doit être entièrement sélectionnable : le tronquer
   ferait copier un jeton incomplet, et l'erreur ne se verrait qu'à l'usage. */
.org-lien {
  display: flex;
  gap: 8px;
  margin: 12px 0 16px;
}
.org-lien input {
  flex: 1;
  font-family: ui-monospace, monospace;
  font-size: .75rem;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
}

/* Les champs ne sont stylés que dans .login-card : le formulaire d'organisation
   héritait donc de l'apparence par défaut du navigateur. */
.org-formulaire .form-group { margin-bottom: 16px; }

.org-formulaire .form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
}

.org-formulaire input[type="text"],
.org-formulaire input[type="email"],
.org-formulaire select {
  width: 100%;
  padding: 10px 12px;
  font-size: .9rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  transition: border-color .15s, box-shadow .15s;
}

.org-formulaire input::placeholder { color: var(--text-light); }

.org-formulaire input:focus,
.org-formulaire select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 26, 46, .08);
}

/* ===== Bandeau d'environnement ===== */

/* Discret mais permanent, en bas : un bandeau en haut masquerait l'en-tête de
   l'application, et on finirait par le supprimer. */
.bandeau-environnement {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 5px 12px;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: #7a5a00;
  background: repeating-linear-gradient(
    45deg, #ffd54f, #ffd54f 12px, #ffca28 12px, #ffca28 24px
  );
  pointer-events: none;
}

/* ===== Affichage du mot de passe ===== */

.champ-mot-de-passe { position: relative; display: block; }

.champ-mot-de-passe input {
  width: 100%;
  /* Place réservée au bouton, pour que le texte ne passe pas dessous. */
  padding-right: 42px !important;
}

.bouton-oeil {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: color .15s, background .15s;
}

.bouton-oeil:hover {
  color: var(--text);
  background: var(--surface-2);
}