/* ===== 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;
}

/* ===== Thème de marque appliqué à la barre latérale =====
 *
 * Chez un client, la barre doit porter SA couleur — le rouge Shiseido est un
 * rouge Shiseido, pas une nuance de gris légèrement teintée. Deux couleurs se
 * règlent par marque : le fond et le texte (icônes comprises).
 *
 * Le mécanisme passe par des variables posées sur `.app-sidebar`. Les états
 * (survol, actif) en dérivent par transparence, ce qui les rend corrects sur
 * n'importe quelle couleur — clair sur foncé comme l'inverse — sans avoir à
 * calculer une palette par marque.
 *
 * Sans marque configurée, aucune variable n'est posée et les valeurs par
 * défaut, celles du thème SCALA, s'appliquent.
 */
.app-sidebar[data-marque] {
  background: var(--marque-fond);
  border-right-color: color-mix(in srgb, var(--marque-texte) 22%, transparent);
}

.app-sidebar[data-marque] .sidebar-btn {
  color: color-mix(in srgb, var(--marque-texte) 72%, transparent);
}

.app-sidebar[data-marque] .sidebar-btn:hover {
  background: color-mix(in srgb, var(--marque-texte) 12%, transparent);
  color: var(--marque-texte);
}

.app-sidebar[data-marque] .sidebar-btn.active {
  background: color-mix(in srgb, var(--marque-texte) 18%, transparent);
  color: var(--marque-texte);
  box-shadow: none;
}

/* L'infobulle inverse le contraste : le texte de la marque devient son fond. */
.app-sidebar[data-marque] .sidebar-tooltip {
  background: var(--marque-texte);
  color: var(--marque-fond);
}

/* Le porte-logo garde un fond clair : un logo de marque y est presque toujours
   dessiné pour du blanc. */
.app-sidebar[data-marque] .sidebar-brand:not(.has-logo) {
  background: color-mix(in srgb, var(--marque-texte) 14%, transparent);
}

.app-sidebar[data-marque] .sidebar-brand:not(.has-logo) svg {
  color: var(--marque-texte);
}

/* LES REPERES TECHNIQUES NE PRENNENT PAS LES COULEURS DE LA MARQUE.
 *
 * L etiquette d environnement et le badge d avatar ne parlent pas de la
 * marque : ils disent sur quel serveur on est et quel prestataire anime la
 * cliente. Les teinter au texte de la marque les rendait illisibles — encre
 * claire sur fond ambre — et laissait croire qu ils lui appartenaient. Leurs
 * couleurs sont porteuses de sens et ne se negocient pas : l ambre du TEST,
 * l orange du flux ferme. On force donc l heritage a s arreter ici. */
.app-sidebar[data-marque] .etiquette-environnement { color: #7a5a00; }


/* Logo rendu comme une EMPREINTE.
 *
 * Le fichier sert de masque : seul son canal alpha compte, et la forme est
 * peinte à la couleur de texte de la marque. La barre reste ainsi d'une seule
 * encre, quelle que soit la couleur d'origine du logo — un logo noir sur un
 * fond de marque foncé serait sinon illisible.
 *
 * `-webkit-mask-*` en plus des propriétés standard : Safari ne comprend encore
 * que la forme préfixée. Sans elle, le logo disparaîtrait purement et
 * simplement sur ce navigateur — un rendu manquant vaut moins qu'un logo en
 * couleurs d'origine.
 */
/* Repli : si le navigateur ne sait pas masquer, le logo reste visible tel quel.
   Un logo invisible vaut moins qu un logo non colorise. */
.sidebar-logo-repli { display: none; }
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .sidebar-logo-empreinte { display: none; }
  .sidebar-logo-repli { display: block; width: 100%; height: 100%; object-fit: contain; }
}

.sidebar-logo-empreinte {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--marque-texte, var(--primary));
  -webkit-mask-image: var(--logo-source);
  mask-image: var(--logo-source);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Le porte-logo n'a plus de fond propre quand il porte une empreinte : la
   couleur de la marque doit passer derrière la forme. */
.app-sidebar[data-marque] .sidebar-brand.has-empreinte {
  background: transparent;
  box-shadow: none;
  padding: 5px;
}



/* ===== 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 =====
 *
 * La règle listait des TYPES : `text`, `file`, plus `textarea` et `select`.
 * Tout le reste — email, mot de passe, nombre, date — retombait sur l'apparence
 * native du navigateur, au milieu d'un formulaire habillé. C'était visible sur
 * l'édition de profil, dont les champs d'adresse et de mot de passe juraient
 * avec les autres.
 *
 * Elle porte désormais sur la CLASSE `.form-input` — qui n'avait aucun style
 * alors qu'elle est posée partout dans les gabarits — et sur les types en
 * complément, pour les champs qui ne la portent pas encore. Un nouveau type
 * d'entrée ne peut plus retomber en silence sur le rendu système.
 */
.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
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;
  font-family: inherit;
  transition: all var(--transition);
}

/* Les champs de couleur et les cases à cocher gardent leur rendu natif : le
   navigateur y attache son sélecteur, l'habiller le casserait. */
.form-input[type="color"],
.form-input[type="checkbox"],
.form-input[type="radio"] {
  width: auto;
  padding: 2px;
}

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;
}

/* Avatar au visage du persona : LemonSlice diffuse en 368x560, soit 0,657.
   Dans un cadre 9:16 (0,562), `object-fit: cover` rognerait les cotes du flux
   ET de l image fixe. On adopte donc le rapport du fournisseur, et les deux se
   superposent exactement — c est ce qui rend la revelation insensible. */
.visual-main.visual-main--persona { aspect-ratio: 368 / 560; }

/* Voile d attente : occupe la MEME cellule de grille que l image, donc il ne
   deplace rien. Sans lui, le portrait fixe ne dit pas qu un avatar arrive. */
.avatar-attente {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  background: rgba(10, 12, 24, .42);
  backdrop-filter: blur(2px);
  color: #fff;
}

.avatar-attente-texte {
  font-size: .85rem;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* 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 */
/* LES FILTRES RESTENT À PORTÉE.
 *
 * Ils défilaient avec la liste : pour affiner une recherche après quelques
 * produits, il fallait remonter tout le catalogue. Collés en haut de l'écran,
 * ils restent visibles ; seuls les produits défilent dessous. Le bandeau
 * déborde sur le rembourrage de la carte pour couvrir les produits qui passent. */
.product-filters {
  position: sticky;
  top: -32px; /* le rembourrage haut de `.screen` */
  z-index: 6;
  margin: 0 -28px 16px;
  padding: 14px 28px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.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;
}

/* Sans formatrice — relecture d une session anterieure a l archivage de sa voix
   — la colonne de gauche disparait ENTIEREMENT. On masquait seulement la zone
   video : la colonne vide subsistait avec son etiquette, et tout le texte du
   diagnostic restait ferre a gauche d une grille a deux colonnes. */
.diagnostic-main-layout.sans-formatrice {
  grid-template-columns: minmax(0, 780px);
  justify-content: center;
}

.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;
}

/* En direct, la formatrice est servie deja recadree en 368x560 : la zone doit
   adopter le meme rapport, sinon `cover` rogne ses cotes et la zone change de
   taille a l arrivee du flux. */
.trainer-video-zone.trainer-video-zone--direct { aspect-ratio: 368 / 560; }

/* Voix archivee de la formatrice, rejouee sous son portrait. */
.trainer-audio-rejeu {
  display: block;
  width: 100%;
  margin-top: 10px;
  height: 34px;
}

.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);
}

/* Relire les echanges. Le bouton n avait aucun style : il s affichait avec la
   mise en forme par defaut du navigateur, au milieu d une liste soignee. */
.history-fil {
  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-fil:hover {
  background: var(--primary-light, rgba(18,20,97,.08));
  color: var(--primary);
}

.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;
}

/* Place réservée au récapitulatif, fixé à droite : sans elle, la dernière
   colonne de produits passait dessous dès 1400 px. */
.prescription-main {
  min-width: 0;
  margin-right: 280px;
}

.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 {
  margin-bottom: 10px;
}

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

@media (max-width: 1400px) {
  .prescription-sidebar {
    right: 12px;
    width: 220px;
  }
  .prescription-main { margin-right: 236px; }
}

/* Écran large : la marge de droite suffit déjà à loger le récapitulatif. */
@media (min-width: 1800px) {
  .prescription-main { margin-right: 0; }
}

/* ===== 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; }
  .product-filters { top: -20px; }
  .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 ===== */
/* LE VOILE EST CLAIR, comme celui de l'attente.
 *
 * Il etait noir a 40 % — une regle heritee, etrangere a la charte : blanc et
 * bleu nuit. Le seul voile sombre du produit est celui de la visionneuse
 * d'images, et il l'est pour une raison qui n'appartient qu'a elle : on
 * regarde une photo, le noir autour la sert.
 *
 * Ici on couvre l'application le temps d'un reglage. C'est exactement ce que
 * fait `.loading-overlay`, et ce sont donc ses valeurs. */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(250,250,250,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.modal-card {
  background: var(--surface);
  border-radius: var(--radius);
  /* Sur un voile clair, l'ombre seule ne detache plus le panneau : le filet
     lui rend son bord. */
  border: 1px solid var(--border);
  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 */
/* JAUGES — une colonne, pas une suite de lignes indépendantes.
 *
 * Chaque ligne était un `flex` à elle seule, et le libellé n'avait qu'une
 * largeur MINIMALE : un intitulé long poussait donc sa barre plus à droite que
 * les autres. Les jauges démarraient et finissaient à des abscisses
 * différentes, et l'on comparait des longueurs qui n'avaient pas la même
 * origine — c'est-à-dire qu'on ne comparait rien.
 *
 * Les lignes partagent désormais UNE grille : la première colonne prend la
 * largeur du plus long libellé (`max-content`, sans troncature), la seconde
 * occupe le reste. Toutes les jauges commencent et finissent au même endroit.
 * `display: contents` laisse les cellules de chaque ligne rejoindre cette
 * grille commune sans renoncer au conteneur de ligne.
 */
.gd-bars {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
}
.gd-bar-row { display: contents; }
/* Un nom de produit peut être long ; au-delà, il mangerait la jauge. On borne
   et l'on coupe — le nom entier reste en infobulle. */
.gd-bar-label {
  font-size: .82rem;
  color: var(--text);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gd-bar-track {
  position: relative;
  height: 22px;
  background: var(--surface-2);
  border-radius: 11px;
}
.gd-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 11px;
  transition: width .3s;
}
/* La valeur est DANS la jauge, ferrée à son bord droit : elle se lit toujours
   au même endroit, quelle que soit la longueur du remplissage. */
.gd-bar-value {
  position: absolute;
  right: 11px; top: 50%;
  transform: translateY(-50%);
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

/* 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); }
/* Les jours COMPRIS dans une plage. Deux cases isolees ne se lisent pas comme
   une periode : il faut voir le pont entre elles. Teinte plus legere que les
   bornes, qui restent les deux dates qu'on a choisies. */
.sched-cal-day.in-span { background: var(--surface-2); color: var(--primary); border-radius: 0; }
.sched-cal-day.in-span:hover { background: var(--border-light); }
.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;
}
/* DES POINTS, PAS UN NOMBRE — et les memes que sur le telephone.
 *
 * Le badge chiffre demandait a etre lu, et mordait sur le numero du jour, qui
 * est l'information principale. Trois points suffisent : au-dela, ce qui compte
 * est « plusieurs », pas le compte exact. Un meme agenda ne doit pas s'ecrire
 * de deux facons selon l'ecran. */
.ls-cal-points {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 4px;
  height: 4px;
}
.ls-cal-points i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
}
.ls-cal-day.today .ls-cal-points i { background: #fff; }

/* 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);
}

/* ===== Marquage d'environnement ===== */

/* Dans la barre latérale, en bas : présent sans empiéter sur le contenu.
   `margin-top:auto` le pousse sous les boutons de navigation. */
.etiquette-environnement {
  margin-top: auto;
  padding: 4px 6px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  color: #7a5a00;
  background: #ffe082;
  border-radius: var(--radius-xs);
  cursor: default;
  user-select: none;
}

/* Sur l'écran de connexion, où la barre latérale n'existe pas encore — et
   où se produit justement la confusion d'environnement. */
.pastille-environnement {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 12px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: #7a5a00;
  background: #ffe082;
  border-radius: 999px;
}

/* ===== 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);
}

/* Personas d une session : DORE quand ils sont prets, gris tant qu ils ne le
   sont pas. Il fallait sinon ouvrir la session pour le savoir. */
.td-icon-btn.td-icon-prets { color: #c9a227; }
.td-icon-btn.td-icon-prets:hover { color: #a8861f; }

/* Bandeaux passagers : une tache longue quittee doit laisser une trace. */
.pile-toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9000;
  pointer-events: none;
}

.toast {
  padding: 11px 18px;
  border-radius: 999px;
  font-size: .88rem;
  color: #fff;
  background: #1f2330;
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
  animation: toast-entree .25s ease;
  max-width: min(90vw, 560px);
  text-align: center;
}

.toast--succes { background: #1f7a44; }
.toast--erreur { background: #a32b22; }
.toast--sortant { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }

@keyframes toast-entree {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fil en attente : la cliente n est pas encore la, rien ne doit s afficher. */
.chat-attente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--text-muted, #8b8b9e);
  font-size: .9rem;
}

/* Relecture en fil de discussion.
   Avec l avatar en direct il n y a plus de clip a rejouer : ce que le formateur
   relit, ce sont les MOTS. On adopte la forme d une messagerie, que tout le
   monde sait lire sans mode d emploi. */
/* Qui a joue la conversation. L historique d un persona mele les apprenantes
   et les essais de preparation du formateur : sans le nom, on ne sait pas a
   qui l on a affaire. */
.history-auteur {
  margin-left: 10px;
  font-weight: 400;
  color: var(--text-muted, #7a7a8c);
  font-size: .88em;
}

.history-essai {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(18,20,97,.08);
  font-size: .82em;
  text-transform: lowercase;
}

.fil { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }

.fil-jalon { display: flex; justify-content: center; margin: 6px 0; }

.fil-jalon span {
  font-size: .76rem;
  color: var(--text-muted, #7a7a8c);
  background: rgba(18,20,97,.06);
  padding: 4px 12px;
  border-radius: 999px;
}

.fil-ligne { display: flex; align-items: flex-end; gap: 8px; }
.fil-ligne--cliente { justify-content: flex-start; }
.fil-ligne--ba { justify-content: flex-end; }

.fil-pastille {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  background: rgba(18,20,97,.10);
  color: var(--primary);
}

/* La conseillere porte les couleurs de la barre laterale : c est la que vit
   l identite de marque dans le reste de l application. */
.fil-pastille--ba {
  background: var(--marque-fond, var(--primary));
  color: var(--marque-texte, #fff);
  letter-spacing: .02em;
}

.fil-bulle {
  max-width: 72%;
  padding: 9px 13px 6px;
  border-radius: 14px;
  background: rgba(18,20,97,.06);
  position: relative;
}

.fil-ligne--ba .fil-bulle {
  background: var(--marque-fond, var(--primary));
  color: var(--marque-texte, #fff);
}

.fil-texte { font-size: .92rem; white-space: pre-wrap; line-height: 1.4; }

.fil-heure {
  display: block;
  text-align: right;
  font-size: .68rem;
  opacity: .6;
  margin-top: 2px;
}

/* ===== LE VERDICT DE LA CLIENTE ===========================================
   Joue par `verdict.js`, le meme module que sur le front mobile. La cliente
   prononce sa conclusion pendant que la jauge monte ; l'emoticone n'arrive
   qu'a la fin, sinon elle donnerait la reponse avant la question. */
.verdict { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* LA SCÈNE PORTE LE VERDICT.
 *
 * `.visual-main` n'était pas positionnée, et la règle de grille qui centre ses
 * enfants (`justify-self: center`) s'appliquait aussi à cette couche absolue :
 * un élément absolu centré prend la largeur de son contenu — ici nulle, la
 * jauge étant elle-même absolue. La jauge, ancrée à 14 px de chaque bord d'une
 * boîte de largeur zéro, s'écrasait en colonne : une lettre par ligne. */
.visual-main { position: relative; }
.visual-main > .verdict { justify-self: stretch; align-self: stretch; }

/* LA BULLE DE PENSÉE — RONDE, COMME EN BANDE DESSINÉE.
 *
 * Elle était large et collée au bord haut-gauche : une étiquette posée sur
 * l'image, pas une pensée. Elle est maintenant ronde et compacte, l'émoticône
 * au-dessus du mot, et descend au niveau du visage — c'est de là que part une
 * pensée. Les deux petits ronds la relient à la cliente. */

/* La jauge, au pied du portrait. */
.verdict-jauge {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(12px);
  border-radius: var(--radius);
  padding: 12px 15px;
  color: #fff;
}
.verdict-jauge-libelle {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .76rem; margin-bottom: 8px;
}
.verdict-valeur { font-size: 1.05rem; font-weight: 700; }
.verdict-piste {
  height: 8px; border-radius: 4px;
  background: rgba(255,255,255,.18); overflow: hidden;
}
/* La couleur est posee IMAGE PAR IMAGE par `verdict.js` : elle traverse le
   rouge, l'orange et le jaune pendant la montee. Les classes par palier
   auraient saute d'une teinte a l'autre. */
.verdict-remplissage {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: rgb(214, 48, 49);
}
.verdict-panier { margin-top: 8px; font-size: .78rem; color: rgba(255,255,255,.8); }

/* Le bouton de reveil de la cliente, au centre du portrait : c'est la que le
   regard est quand elle s'immobilise. */
.reveil {
  position: absolute; top: 50%; left: 50%; z-index: 5;
  transform: translate(-50%, -50%);
  background: var(--surface); color: var(--primary);
  border: none; border-radius: 999px; padding: 13px 24px;
  font-size: .88rem; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow-lg);
}
.reveil:hover { background: var(--surface-2); }

/* LA FORMATRICE DE LA MARQUE : la matiere a gauche, le resultat a droite,
   l'action entre les deux. On lit la transformation dans le sens de la lecture,
   et le bouton est une fleche entre deux images plutot qu'une barre qui les
   separe — d'ou sa forme verticale et etroite, a la hauteur des deux blocs. */
.formatrice-atelier {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}

.formatrice-source,
.formatrice-scene {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 16px;
  text-align: center;
}
/* Le resultat porte le MEME cadre que la matiere : deux blocs de meme nature,
 * l'un depose l'autre engendre, et rien ne justifiait qu'ils ne se ressemblent
 * pas. On reprend donc le trait de `.drop-zone`, sans le curseur ni le survol
 * — on ne depose rien ici. */
.formatrice-scene {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  transition: all var(--transition);
}
.formatrice-atelier .brand-asset-preview { max-height: 170px; border-radius: var(--radius-xs); }

/* La scene engendree s'ouvre en plein ecran : c'est la seule facon de juger
 * une implantation — le vignettage cache justement ce qu'on vient verifier. */
.formatrice-scene img { cursor: zoom-in; }
.formatrice-scene:has(img):hover { border-color: var(--accent); }
.formatrice-atelier p { font-size: .82rem; color: var(--text-muted); margin: 0; }

/* L'emplacement vide dit ce qu'on y attend, plutot que de rester blanc. */
.formatrice-vide { width: 46px; height: 46px; color: var(--text-light); }

/* Le bouton : une colonne etroite, aussi haute que les deux blocs d'images,
 * avec la seule icone IA en son centre. Un libelle tourne a 90 degres se lit
 * mal et n'apprend rien de plus que l'etincelle employee partout ailleurs pour
 * la generation ; le titre porte la phrase complete. */
.btn-generer-formatrice {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
  border-radius: var(--radius-sm);
  align-self: stretch;
}
.btn-generer-formatrice svg { width: 22px; height: 22px; }
.btn-generer-formatrice:disabled { opacity: .35; cursor: not-allowed; }

/* Pendant la composition, l'icone bat : c'est le seul endroit ou l'attente
 * peut se dire, le bouton n'ayant plus de texte a remplacer. */
.btn-generer-formatrice.en-cours svg { animation: formatrice-bat 1.2s ease-in-out infinite; }
@keyframes formatrice-bat {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.85); }
}

/* =============================================================================
   TABLEAU DE BORD DU FORMATEUR
   =============================================================================
   L'ecran ne liste plus, il PILOTE : ce qui bloque, ce qui se joue, ce qui
   peche. D'ou trois encodages visuels, chacun porteur d'une information et
   d'une seule.

     la BARRE d'avancement    ce qui est fait, ce qui court, ce qui manque ;
     la PASTILLE d'etat       ou en est une apprenante, d'un coup d'oeil ;
     le LISERE des urgences   une seance ouverte dont la preparation manque.

   Aucun de ces trois n'est decoratif : la ou l'un d'eux disparaitrait, il
   faudrait lire un chiffre pour savoir la meme chose. */

.learner-hero-sous {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
}
.learner-hero-card.learner-hero-score .learner-hero-sous { color: rgba(255,255,255,.65); }

/* Les cartes de chiffres deviennent des points d'entree : elles disent ce
   sur quoi on peut agir, il faut donc pouvoir y aller. */
.td-cliquable { cursor: pointer; transition: border-color var(--transition), transform var(--transition); }
.td-cliquable:hover { border-color: var(--accent); transform: translateY(-1px); }

/* --- Filtres ------------------------------------------------------------- */
.td-filtres { display: flex; gap: 4px; flex-wrap: wrap; }
.td-filtre {
  font-size: .78rem;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  transition: all var(--transition);
}
.td-filtre:hover { border-color: var(--accent); color: var(--text); }
.td-filtre.actif { background: var(--primary); border-color: var(--primary); color: #fff; }

/* --- Ce qui bloque -------------------------------------------------------- */
.td-alerte {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-light);
}
.td-alerte:last-child { border-bottom: 0; }
/* Le lisere ne dit pas « attention » en general : il dit que la seance est
   OUVERTE, donc que la preparation est en retard et non en avance. */
.td-alerte--urgente { border-left: 3px solid var(--warning); padding-left: 12px; margin-left: -15px; }
.td-alerte-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.td-alerte-manques { font-size: .82rem; color: var(--text-muted); }
.td-alerte-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- Une seance ----------------------------------------------------------- */
.td-seance {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--surface);
}
.td-seance--ouverte { border-color: var(--accent-light); }
.td-seance-tete {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  text-align: left;
  background: none; border: 0;
}
.td-seance-tete:hover { background: var(--surface-2); }
.td-seance-tete:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.td-chevron { display: flex; color: var(--text-muted); transition: transform var(--transition); flex: none; }
.td-chevron.ouvert { transform: rotate(90deg); }
.td-seance-titre { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.td-seance-titre .muted { font-size: .8rem; }
.td-seance-chiffres {
  display: flex; align-items: center; gap: 10px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.td-moy { font-size: .78rem; color: var(--text-muted); }
.td-reste { font-size: .76rem; color: var(--text-muted); }
.td-reste--proche { color: var(--warning); font-weight: 600; }

/* La barre porte TROIS quantites d'un coup : terminees, en cours, et par
   soustraction ce qui reste. Un « 7/11 » seul ne dit pas si les quatre autres
   ont commence. */
.td-barre { display: flex; height: 5px; background: var(--surface-2); }
.td-barre-part { display: block; height: 100%; }
.td-barre-part--termine { background: var(--success); }
.td-barre-part--encours { background: var(--warning); }

.td-seance-detail { padding: 6px 14px 12px; }
.td-appr {
  display: grid;
  grid-template-columns: 1fr auto 62px auto;
  align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.td-appr:last-of-type { border-bottom: 0; }
.td-appr-nom { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-appr-note { font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.td-seance-pied { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

.td-pastille {
  font-size: .72rem; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  white-space: nowrap;
}
.td-pastille--attente { background: var(--surface-2); color: var(--text-muted); }
.td-pastille--encours { background: rgba(244,166,35,.16); color: #8a5a00; }
.td-pastille--termine { background: var(--success-light); color: #1c6b32; }

/* --- Ce qui peche --------------------------------------------------------- */
.td-critere { padding: 9px 0; border-bottom: 1px solid var(--border-light); }
.td-critere:last-child { border-bottom: 0; }
.td-critere-tete {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .85rem; margin-bottom: 5px; gap: 10px;
}
.td-critere-tete .muted { font-size: .78rem; }
.td-critere-piste { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.td-critere-piste i { display: block; height: 100%; border-radius: 3px; }

/* --- Qui decroche --------------------------------------------------------- */
.td-suivi {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border-light);
}
.td-suivi:last-child { border-bottom: 0; }
.td-suivi-nom { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-suivi-note {
  font-size: .85rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px;
}
.td-tendance { font-size: .76rem; font-weight: 700; }
.td-tendance--hausse { color: var(--success); }
.td-tendance--baisse { color: var(--error); }

@media (max-width: 720px) {
  .td-appr { grid-template-columns: 1fr auto; }
  .td-appr-note, .td-appr-action { grid-column: span 2; text-align: left; }
}

/* --- Piocher dans la galerie plutot qu'engendrer -------------------------- */
/* Reutiliser ne produit rien : pas d'images, pas de voix, aucune unite du plan
   consommee. Le bloc est donc REPLIE par defaut — engendrer reste le geste
   ordinaire — mais il annonce ce qui reste a couvrir, pour qu'on sache qu'il
   existe au moment ou il sert. */
.pc-galerie {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 14px;
  overflow: hidden;
}
.pc-galerie-bascule {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 0; text-align: left;
  font-size: .9rem; font-weight: 600;
}
.pc-galerie-bascule:hover { background: var(--surface); }
.pc-galerie-bascule:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pc-galerie-chevron { display: flex; color: var(--text-muted); transition: transform var(--transition); }
.pc-galerie-bascule.ouvert .pc-galerie-chevron { transform: rotate(90deg); }
.pc-galerie-compte { margin-left: auto; font-weight: 400; font-size: .82rem; }

.pc-galerie-corps { padding: 12px 14px; }
.pc-galerie-filtres {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.pc-galerie-filtres input, .pc-galerie-filtres select {
  flex: 1 1 130px; min-width: 0;
  padding: 7px 10px; font-size: .85rem;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--surface);
}

.pc-galerie-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px; max-height: 330px; overflow-y: auto;
}
.pc-gal-carte {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-light); border-radius: var(--radius-xs);
  cursor: pointer; background: var(--surface);
  transition: border-color var(--transition);
}
.pc-gal-carte:hover { border-color: var(--accent); }
.pc-gal-carte:has(input:checked) { border-color: var(--accent); background: rgba(201,168,124,.07); }
.pc-gal-carte--prise { opacity: .5; cursor: default; }
.pc-gal-carte img, .pc-gal-vide {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--radius-xs); object-fit: cover;
  background: var(--surface-2);
}
.pc-gal-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: .84rem; }
.pc-gal-texte .muted { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-gal-etat { font-size: .72rem; color: var(--accent-dark); }

.pc-galerie-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px; flex-wrap: wrap;
}

/* =============================================================================
   ATTRIBUTION DES CLIENTES — onglet « Clientes » d'une seance
   =============================================================================
   La seance se prepare en deux temps : planifier, puis apparier. Le second
   n'existait pas a l'ecran — on engendrait N clientes, elles etaient
   distribuees dans l'ordre des identifiants, et personne ne voyait qui jouait
   quoi.

   La forme porte la relation : deux blocs face a face, relies par un trait.
   Le cercle vide dit la place AVANT qu'elle soit occupee, ce qui rend le
   manque evident sans avoir a compter. */

.pb-barre {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.pb-criteres { display: flex; gap: 10px; flex-wrap: wrap; }
.pb-critere { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--text-muted); }
.pb-critere select {
  padding: 6px 9px; font-size: .85rem;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--surface); color: var(--text);
}
.pb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pb-mention { font-size: .85rem; margin-bottom: 10px; }

.pb-liste { display: flex; flex-direction: column; gap: 8px; }

/* La paire : qui joue, et quelle cliente. Le trait entre les deux est ce qui
   fait lire une RELATION plutot que deux listes cote a cote. */
.pb-paire {
  display: grid;
  grid-template-columns: 1fr 28px minmax(180px, 1.1fr) auto;
  align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.pb-lien { height: 1px; background: var(--border); }

.pb-qui {
  display: flex; flex-direction: column; gap: 1px;
  text-align: left; background: none; border: 0; padding: 4px 0;
  border-radius: var(--radius-xs);
}
.pb-qui:not(:disabled):hover .pb-qui-nom { color: var(--accent-dark); }
.pb-qui:disabled { cursor: default; }
.pb-qui-nom { font-weight: 600; font-size: .9rem; }
.pb-qui-sous { font-size: .78rem; }

.pb-cliente {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border: 1px solid var(--border-light);
  border-radius: var(--radius-xs); background: var(--surface-2);
  text-align: left; min-width: 0;
}
.pb-cliente:hover { border-color: var(--accent); }
.pb-cliente img, .pb-vide-visuel {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%; object-fit: cover; object-position: center 20%; background: var(--border-light);
}
.pb-cliente-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: .85rem; }
.pb-cliente-texte .muted { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* LA PLACE VIDE SE VOIT. Un cercle a la taille du portrait qui viendra : le
   manque se compte d'un regard, sans lire un chiffre. */
.pb-plus {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px dashed var(--border);
  color: var(--text-light); font-size: 1.5rem; line-height: 1;
  background: none;
  display: grid; place-items: center;
  transition: all var(--transition);
}
.pb-plus:hover { border-color: var(--accent); color: var(--accent-dark); background: rgba(201,168,124,.06); }

.pb-detacher {
  width: 26px; height: 26px; border-radius: 50%;
  background: none; border: 0; color: var(--text-light);
  font-size: 1.1rem; line-height: 1;
}
.pb-detacher:hover { background: var(--surface-2); color: var(--error); }

.pb-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 16px; flex-wrap: wrap;
}

/* Le choix, au clic sur un « + » : la bibliotheque, deja filtree. */
.pb-choix-liste {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 320px; overflow-y: auto;
}
.pb-choix-carte {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; text-align: left;
  border: 1px solid var(--border-light); border-radius: var(--radius-xs);
  background: var(--surface); font-size: .86rem;
}
.pb-choix-carte:hover { border-color: var(--accent); }
/* Le portrait en cercle, recadre et non deforme : la carte ne fixait que la
   taille, et le portrait vertical s'ecrasait dans un carre. */
.pb-choix-carte img, .pb-choix-carte .pb-vide-visuel {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%; object-fit: cover; object-position: center 20%;
  background: var(--border-light);
}
.pb-choix-carte span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pb-choix-carte .muted { font-size: .76rem; }

/* Les competences d'une apprenante : du plus faible au plus fort, parce que
   c'est sur le premier qu'une cliente bien choisie la fera progresser. */
.pb-skill {
  display: grid; grid-template-columns: 1fr 90px auto;
  align-items: center; gap: 10px; padding: 6px 0;
  font-size: .85rem;
}
.pb-skill-piste { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.pb-skill-piste i { display: block; height: 100%; border-radius: 3px; }

.pb-fiche { display: flex; gap: 14px; margin-bottom: 12px; }
.pb-fiche-portrait { width: 90px; height: 120px; object-fit: cover; border-radius: var(--radius-xs); flex: none; }
.pb-fiche-corps { display: flex; flex-direction: column; gap: 4px; font-size: .86rem; min-width: 0; }
.pb-fiche-ligne { display: flex; gap: 8px; }
.pb-fiche-ligne .muted { flex: 0 0 78px; }
.pb-fiche-objectif { font-style: italic; margin-bottom: 8px; font-size: .9rem; }

@media (max-width: 720px) {
  .pb-paire { grid-template-columns: 1fr auto; }
  .pb-lien { display: none; }
}

/* --- La preparation d'une seance est un PARCOURS -------------------------- */
/* Quatre onglets ouvrables dans n'importe quel ordre, et deux boutons qui
   semblaient faire la meme chose. Le numero et l'etat disent ou l'on en est ;
   l'etape suivante ne s'ouvre que lorsque la precedente est faite. */
.session-etapes .session-tab { display: flex; align-items: center; gap: 8px; }
.etape-num {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700;
  background: var(--surface-2); color: var(--text-muted);
  flex: none;
}
.session-tab.active .etape-num { background: var(--primary); color: #fff; }
.session-tab.etape-faite .etape-num { background: var(--success); color: #fff; }
.session-tab.etape-bloquee { opacity: .55; }

.sched-pied-aide { flex: 1; font-size: .82rem; text-align: right; }

/* Ce qui a commence ne bouge plus : la conversation, les notes et la cliente y
   sont rattachees. */
.learner-figee { opacity: .6; }
.learner-figee .learner-meta { color: var(--warning); }

.pb-figee {
  font-size: .7rem; font-weight: 600;
  color: var(--text-muted); background: var(--surface-2);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}

/* Le recapitulatif dit AUSSI qui joue quelle cliente : c'est la moitie du
   travail de preparation, et c'est ce qu'on valide en ouvrant la seance. */
.recap-paires { display: flex; flex-direction: column; gap: 4px; }
.recap-paire {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: .85rem; padding: 4px 0;
  border-bottom: 1px solid var(--border-light);
}
.recap-paire:last-child { border-bottom: 0; }
.recap-paire-manque { color: var(--error); }

/* Les initiales, dans la barre laterale — memes valeurs que la pastille du
   telephone : c'est le meme objet, il doit avoir la meme tete. */
.pastille-initiales {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  display: grid; place-items: center; flex: none;
}
.app-sidebar[data-marque] .pastille-initiales {
  background: color-mix(in srgb, var(--marque-texte) 22%, transparent);
  color: var(--marque-texte);
}
.sidebar-btn.active .pastille-initiales { background: var(--accent); color: #fff; }

/* ===== VISITE GUIDÉE (visite-guidee.js) =====
 *
 * Le voile n'est pas un fond plein percé : c'est l'OMBRE de la zone éclairée,
 * étendue à tout l'écran. La découpe suit ainsi la zone sans calcul de
 * masque, coins arrondis compris. Le voile dérive de la couleur primaire :
 * il assombrit une barre latérale de marque claire comme une foncée, et le
 * liseré doré garde la zone lisible sur l'une et l'autre.
 *
 * Sous les notifications (9000) : « Visite guidée activée » doit rester lue.
 */
.visite-calque[hidden] { display: none; }
.visite-calque {
  position: fixed;
  inset: 0;
  z-index: 8000;
}
/* Bloque les clics le temps de la visite : un « Rejoindre » cliqué par
   mégarde ouvrirait une conversation. Fermée, la visite ne laisse rien. */
.visite-bloqueur {
  position: absolute;
  inset: 0;
  background: transparent;
}
.visite-projecteur {
  position: fixed;
  border-radius: var(--radius-sm);
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 0 9999px color-mix(in srgb, var(--primary) 66%, transparent);
  pointer-events: none;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.visite-bulle {
  position: fixed;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
  padding: 18px 20px 14px;
  animation: visite-entree .2s ease;
}
.visite-bulle:focus { outline: none; }
.visite-compteur {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent-dark);
  margin-bottom: 4px;
}
.visite-titre {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 24px 6px 0;
  color: var(--text);
}
.visite-texte {
  font-size: .87rem;
  line-height: 1.5;
  color: var(--primary-soft);
  margin-bottom: 14px;
}
.visite-fermer {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.visite-fermer:hover { background: var(--surface-2); color: var(--text); }
.visite-pied {
  display: flex;
  align-items: center;
  gap: 8px;
}
.visite-espace { flex: 1; }
.visite-lien {
  border: none;
  background: none;
  padding: 4px 0;
  font: inherit;
  font-size: .78rem;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.visite-lien:hover { color: var(--text); }
/* « Précédent » à la première étape : visible mais éteint, le pied ne saute pas. */
.visite-bulle .btn:disabled { opacity: .4; cursor: default; }
.visite-bulle button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@keyframes visite-entree {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
/* Mouvement réduit : la zone saute d'une cible à l'autre, la bulle apparaît. */
.visite-sans-mouvement .visite-projecteur { transition: none; }
.visite-sans-mouvement .visite-bulle { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .visite-projecteur { transition: none; }
  .visite-bulle { animation: none; }
}

/* Le « ? » allumé : une pastille dorée, distincte de l'état « page
   courante » des autres boutons — le mode n'est pas une page. */
.sidebar-btn.visite-allumee { color: var(--accent-dark); }
.sidebar-btn.visite-allumee::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}
.app-sidebar[data-marque] .sidebar-btn.visite-allumee { color: var(--marque-texte); }
.app-sidebar[data-marque] .sidebar-btn.visite-allumee::after { box-shadow: 0 0 0 2px var(--marque-fond); }