/* =========================================================
   Flexoki colour palette
   https://stephango.com/flexoki
   ========================================================= */
:root {
  /* Base scale */
  --paper:    #FFFCF0;
  --base-50:  #F2F0E5;
  --base-100: #E6E4D9;
  --base-200: #DAD8CE;
  --base-300: #CECDC3;
  --base-400: #B7B5AC;
  --base-500: #9F9D96;
  --base-600: #878580;
  --base-700: #6F6E69;
  --base-800: #575653;
  --base-850: #3A3938;
  --base-900: #282726;
  --base-950: #1C1B1A;
  --black:    #100F0F;

  /* Accent colours */
  --red:     #AF3029;
  --orange:  #BC5215;
  --yellow:  #AD8301;
  --green:   #5E7E24;  /* aligned to the logo green (--brand-green) hue, darkened for readable text/fills */
  --cyan:    #24837B;
  --blue:    #205EA6;
  --purple:  #5E409D;
  --magenta: #A02F6F;

  /* Light-mode accent variants */
  --red-l:     #D14D41;
  --orange-l:  #DA702C;
  --yellow-l:  #D0A215;
  --green-l:   #8CBB45;  /* logo-green hue (mid) */
  --cyan-l:    #3AA99F;
  --blue-l:    #4385BE;
  --purple-l:  #8B7EC8;
  --magenta-l: #CE5D97;

  /* Brand colour */
  --brand-green: #A5CE5C;

  /* Semantic tokens */
  --bg:         var(--paper);
  --bg-alt:     var(--base-50);
  --bg-ui:      var(--base-100);
  --border:     var(--base-200);
  --text:       var(--base-900);
  --text-faint: var(--base-600);
  --accent:     var(--green);
  --accent-l:   var(--green-l);

  /* Layout */
  --sidebar-w: 220px;
  --topbar-h:  64px;
  --radius:    6px;
  --radius-lg: 10px;
  --gap:       1.5rem;

  /* Refined Flexoki refresh — depth & motion tokens */
  --shadow-sm: 0 1px 2px rgba(16, 15, 15, 0.04), 0 1px 3px rgba(16, 15, 15, 0.05);
  --shadow-md: 0 4px 14px rgba(16, 15, 15, 0.07), 0 2px 6px rgba(16, 15, 15, 0.04);
  --ring:      0 0 0 3px rgba(94, 126, 36, 0.12);  /* logo-green focus halo (matches --green) */
  --transition: 0.18s ease;
}

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

html, body { height: 100%; }

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  /* App-shell layout: body never scrolls; sidebar + main scroll
     independently inside `.shell`. This makes the sidebar effectively
     sticky without using position: sticky. */
  height: 100vh;
  overflow: hidden;
}

/* The React SPA mounts here. It must continue body's flex column so .topbar +
   .shell/.main lay out exactly as they did when they were direct children of
   body — otherwise .main can't bound its own height and stops scrolling.
   (min-height:0 lets the inner overflow:auto regions size correctly.) */
#root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

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

/* =========================================================
   Top bar
   ========================================================= */
.topbar {
  height: var(--topbar-h);
  background: var(--black);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--brand-green);
  border-radius: var(--radius);
  padding: 4px 8px;
}

.topbar__logo img {
  height: 44px;
  width: auto;
  display: block;
}

.topbar__spacer { flex: 1; }

.topbar__nav {
  display: flex;
  gap: 0.25rem;
  list-style: none;
}

.topbar__nav a {
  color: var(--base-300);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  transition: background 0.15s, color 0.15s;
}

.topbar__nav a:hover,
.topbar__nav a.active {
  background: var(--base-850);
  color: var(--paper);
  text-decoration: none;
}

/* =========================================================
   Layout shell — body locks scroll; children scroll independently
   ========================================================= */
.shell {
  display: flex;
  flex: 1;
  overflow: hidden;       /* required for nested overflow:auto to work */
}

/* =========================================================
   Sidebar — fixed-width column, scrolls only if its own content overflows
   ========================================================= */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  padding: 1.25rem 0;
  flex-shrink: 0;
  overflow-y: auto;       /* the menu itself scrolls if too tall, but not the page */
  display: flex;          /* lets .sidebar__flashes use margin-top:auto to pin to the bottom */
  flex-direction: column;
}

.sidebar__section {
  margin-bottom: 1.5rem;
}

.sidebar__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-green);
  background: var(--black);
  padding: 0.35rem 0.75rem;
  margin: 0 0.5rem 0.5rem;
  border-radius: var(--radius);
}

.sidebar__nav {
  list-style: none;
}

.sidebar__nav a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  /* room for the active accent bar; rounded so hover/active reads as a pill */
  margin: 0.1rem 0.5rem;
  padding: 0.45rem 0.75rem;
  color: var(--text);
  border-radius: var(--radius);
  font-size: 0.875rem;
  border-left: 2px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}

.sidebar__nav a:hover {
  background: var(--bg-ui);
  color: var(--accent);
  text-decoration: none;
}

.sidebar__nav a.active {
  background: var(--bg-ui);
  color: var(--accent);
  font-weight: 600;
  border-left-color: var(--accent);
  text-decoration: none;
}

.sidebar__nav .icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  flex-shrink: 0;
}

/* The dashboard is the main entry: an outlined green pill so it reads as
   distinct from the plain section links, and fills solid green when active. */
.sidebar__nav a.sidebar__home {
  margin: 0 0.5rem 0.35rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--green-l);
  border-radius: 8px;
  color: var(--accent);
  font-weight: 600;
}

.sidebar__nav a.sidebar__home:hover,
.sidebar__nav a.sidebar__home.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* =========================================================
   Main content
   ========================================================= */
.main {
  flex: 1;
  padding: var(--gap);
  overflow-y: auto;
}

/* =========================================================
   Cards
   ========================================================= */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition),
              border-color var(--transition);
}
/* Lift only cards that are interactive containers (stats, panels). The
   :hover affordance signals "this is a live tile" without moving text blocks
   around jarringly. */
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--base-300);
}

.card__title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  margin-bottom: 0.4rem;
}

/* Content-card headers (Équipes, Bibliothèque, Sessions récentes...): a
   light-green band bleeding to the card edges, bold green title. Direct-child
   only, so the small titles inside the stat KPI tiles stay plain. */
.card > .card__title {
  background: #D8E8B0;
  font-weight: 700;
  color: var(--green);
  margin: 0 -1.35rem 0.75rem;
  padding: 0.45rem 1.35rem;
}
/* When the title is the card's first element, fill the gap up to the top
   edge and follow the card's rounded corners. Mid-card titles (e.g.
   "Prochaine session") keep the plain band above. */
.card > .card__title:first-child {
  margin-top: -1.35rem;
  padding-top: 0.6rem;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}

.card__value {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--accent);          /* branded pop on the big KPI numbers */
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Grid helpers
   ========================================================= */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
/* Grid children may hold tables/long text: allow them to shrink below their
   content width instead of overflowing the viewport. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > * { min-width: 0; }
/* Responsive: collapse the grids as the window narrows so the cards reflow
   instead of spilling off-screen. */
@media (max-width: 1280px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.05rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition), transform var(--transition);
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn-primary {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--green-l);
  border-color: var(--green-l);
  text-decoration: none;
  color: var(--paper);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-ghost {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover {
  background: var(--bg-ui);
  border-color: var(--base-300);
  text-decoration: none;
}

/* Inline icon used inside buttons (e.g. calendar export). */
.btn .icon--calendar {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* =========================================================
   Tables
   ========================================================= */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-alt); }

/* =========================================================
   Forms
   ========================================================= */
.form-group { margin-bottom: 1rem; }

label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: var(--text);
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--base-300);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--text);
  font-size: 0.9rem;
  box-shadow: inset 0 1px 2px rgba(16, 15, 15, 0.04);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

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

/* =========================================================
   Badge
   ========================================================= */
.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-green   { background: #D4E4A0; color: var(--green); }
.badge-orange  { background: #F5DCC8; color: var(--orange); }
.badge-red     { background: #F5C5C0; color: var(--red); }
.badge-blue    { background: #C8DCEF; color: var(--blue); }
.badge-faint   { background: var(--bg-ui); color: var(--text-faint); }

/* =========================================================
   Flash messages
   ========================================================= */
.flash { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.875rem; }
.flash-success { background: #D4E4A0; color: var(--green); }
.flash-error   { background: #F5C5C0; color: var(--red); }
.flash-info    { background: #C8DCEF; color: var(--blue); }

/* =========================================================
   Page header
   ========================================================= */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--gap);
  padding-bottom: 0.6rem;
  /* Underline delimits the page title, matching the dashboard header. */
  border-bottom: 2px solid var(--base-300);
}

.page-header h1 {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--black);
  line-height: 1.1;
}

/* =========================================================
   Section sub-nav — a tab bar under a page title, with the
   logo beside it. Shared by the Competence pages and the
   Objection page so both read the same way.
   ========================================================= */
.section-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.section-tabs { display: flex; gap: 0.25rem; }
/* Works as both an <a> (competence pages) and a <button> (in-page tabs). */
.section-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-faint);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;          /* overlap the wrapper's border */
  cursor: pointer;
  text-decoration: none;
}
.section-tab .icon { width: 16px; height: 16px; stroke-width: 1.75; flex-shrink: 0; }
.section-tab:hover { color: var(--text); text-decoration: none; }
.section-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
/* Objection tab buttons (used by the Jinja objections page and the React one). */
.obj-tabs { display: flex; gap: 0.25rem; }
.obj-tab {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 1.1rem; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.obj-tab .icon { width: 16px; height: 16px; stroke-width: 1.75; flex-shrink: 0; }
.obj-tab:hover { color: var(--text); }
.obj-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* Sub-toggle inside Entrainement: switch between Drill and Jeu de rôle. */
.obj-subtoggle {
  display: inline-flex; gap: 0.25rem; margin-bottom: 1.5rem;
  background: var(--bg-ui); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.2rem;
}
.obj-subtoggle button {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: 0.85rem; font-weight: 600; color: var(--text-faint);
  padding: 0.35rem 1rem; border-radius: 999px;
}
.obj-subtoggle button:hover { color: var(--text); }
.obj-subtoggle button.is-active { background: var(--accent); color: #fff; }

/* "?" help button — sits at the right end of the objection tab bar (green). */
.obj-help {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--green-l); border-radius: 999px;
  background: none; color: var(--green); cursor: pointer;
}
.obj-help:hover { color: #fff; background: var(--green); border-color: var(--green); }
.obj-help .icon { width: 18px; height: 18px; stroke-width: 1.8; }

/* Guide modal: how to use the objection tool, with clickable section boxes. */
.obj-guide-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(16, 15, 15, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 2.5rem 1rem; overflow-y: auto;
}
.obj-guide {
  background: var(--bg); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); max-width: 40rem; width: 100%;
  padding: 1.5rem;
}
.obj-guide__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.25rem;
}
.obj-guide__head h2 { font-size: 1.15rem; margin: 0; }
.obj-guide__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.obj-guide__box {
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: 0.85rem 1rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-ui);
  text-decoration: none; color: var(--text); transition: border-color .12s, background .12s;
}
.obj-guide__box:hover {
  border-color: var(--accent); background: #fff; text-decoration: none;
}
.obj-guide__icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius);
  background: #EFF7DD; color: var(--green);
}
.obj-guide__icon .icon { width: 22px; height: 22px; stroke-width: 1.75; }
.obj-guide__body { display: flex; flex-direction: column; gap: 0.15rem; }
.obj-guide__title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.obj-guide__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0;
  background: var(--brand-green); color: #fff; font-size: 0.75rem; font-weight: 700;
}
.obj-guide__text { font-size: 0.85rem; color: var(--text-faint); }

/* 1-5 segmented score picker (role-play scores + energy). */
.scale { display: inline-flex; gap: 0.35rem; margin-top: 0.4rem; }
.scale__btn {
  width: 2.4rem; height: 2.4rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-ui);
  font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--text-faint);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.scale__btn:hover { border-color: var(--green-l); color: var(--text); }
.scale__btn.is-active {
  background: var(--green); border-color: var(--green); color: #fff;
}

/* ACRA framework — a free-text input per step (role-play). */
.acra-fields { display: grid; gap: 0.5rem; margin-top: 0.4rem; }
.acra-field { display: flex; align-items: center; gap: 0.6rem; }
.acra-field__tag {
  display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0;
  min-width: 9.5rem; font-size: 0.82rem; font-weight: 600; color: var(--text);
}
.acra-field__letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  background: #EFF7DD; color: var(--green); font-size: 0.75rem; font-weight: 700;
}
.acra-field input { flex: 1; }
@media (max-width: 32rem) {
  .acra-field { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .acra-field__tag { min-width: 0; }
}

/* ACRA framework reference (under the "Mes objections" products column). */
.mo-leftcol { display: flex; flex-direction: column; gap: 1.25rem; }
.acra-legend__list { margin: 0; display: grid; gap: 0.75rem; }
.acra-legend__row {
  display: grid; grid-template-columns: 22px 1fr; column-gap: 0.6rem; align-items: start;
}
.acra-legend__row .acra-field__letter { margin-top: 0.1rem; }
.acra-legend__row dt { font-size: 0.9rem; }
.acra-legend__row dd { grid-column: 2; margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--text-faint); }

/* Energy before/after side-by-side. */
.rp-energy { display: flex; gap: 2rem; flex-wrap: wrap; }

/* Score interpretation legend (always-visible reference). */
.score-guide { margin: 0.25rem 0 1rem; font-size: 0.85rem; }
.score-guide__title { font-weight: 600; color: var(--text-faint); margin: 0 0 0.35rem; }
.score-guide__table { border-collapse: collapse; margin-top: 0.25rem; width: 100%; }
.score-guide__table td { padding: 0.35rem 0.6rem; border-top: 1px solid var(--border); vertical-align: top; }
.score-guide__range { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-faint); }
.score-guide__level { font-weight: 600; white-space: nowrap; }
.score-guide__advice { color: var(--text-faint); }

/* Role-play chips in the cahier (energy / coach score / ACRA used). */
.oc-entry__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }

/* Drill setup screen — sectioned card with selectable source cards + chips. */
.drill-setup { margin-bottom: 1.5rem; }
.drill-setup__section { margin-bottom: 1.4rem; }
.drill-setup__title { font-weight: 600; margin: 0 0 0.6rem; color: var(--text); }
/* Unified selectable "boxes" (source, products, categories): a bordered box
   with a small square indicator that fills green when selected. */
.drill-boxes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.drill-box {
  display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.95rem;
  background: none; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-faint);
}
.drill-box:hover { border-color: var(--accent); color: var(--text); }
.drill-box.is-active { border-color: var(--accent); color: var(--text); background: #FBFEF5; }
/* Hide the native radio (source) — the square span is the visible indicator. */
.drill-box input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drill-box__check {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #C7C7C0;
  flex-shrink: 0; position: relative; transition: background 0.12s ease, border-color 0.12s ease;
}
.drill-box.is-active .drill-box__check { background: var(--accent); border-color: var(--accent); }
.drill-box.is-active .drill-box__check::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* "Toutes / Tous" — nuance: dashed border, no square indicator, green tint when on. */
.drill-box--all { border-style: dashed; }
.drill-box--all .drill-box__check { display: none; }
.drill-box--all.is-active { background: #EFF7DD; border-color: var(--accent); color: var(--green); }

/* Cahier objection — past-training entries. */
.oc-entry { margin-bottom: 0.85rem; }
.oc-entry__head { display: flex; align-items: center; gap: 0.6rem; }
.oc-entry__score { font-weight: 700; }
.oc-entry__meta { font-size: 0.9rem; color: var(--text); margin-top: 0.4rem; font-weight: 600; }
.oc-entry__notes {
  margin: 0.7rem 0 0; display: grid; grid-template-columns: auto 1fr;
  gap: 0.25rem 0.9rem; font-size: 0.85rem;
}
.oc-entry__notes dt { font-weight: 600; color: var(--text-faint); white-space: nowrap; }
.oc-entry__notes dd { margin: 0; }

/* Role-play (Jeu de rôle) scenario cards + detail panel. */
.rp-card { transition: border-color 0.15s; }
.rp-card:hover { border-color: var(--accent); }
.rp-card.is-active { border-color: var(--accent); border-width: 2px; }
.rp-detail dt {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-faint); margin-top: 0.75rem;
}
.rp-detail dd { margin: 0.15rem 0 0; }

/* Mes objections (My objections): products column + objection form. */
.mo-layout { display: grid; grid-template-columns: 18rem 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 820px) { .mo-layout { grid-template-columns: 1fr; } }
.mo-product {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer;
}
.mo-product:hover { background: var(--surface-2, #f3f4f6); }
.mo-product.is-active { background: var(--surface-2, #eef2ff); font-weight: 600; }
.mo-product__count { color: var(--text-faint); font-size: 0.8rem; font-weight: 400; }
.mo-addprod { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.mo-addprod input { flex: 1; }
.mo-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 600px) { .mo-form-grid { grid-template-columns: 1fr; } }
.mo-form-grid .full { grid-column: 1 / -1; }
.mo-rowactions { white-space: nowrap; }
.mo-rowactions .btn { padding: 0.2rem 0.6rem; font-size: 0.75rem; }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 0.2rem; }
.icon-btn:hover { color: var(--red); }
/* SVG icons inside an icon-btn have no sizing context of their own — give them one. */
.icon-btn .icon { width: 18px; height: 18px; stroke-width: 1.8; vertical-align: middle; }

/* USP cards (Produits / Services + Bibliothèque › USP). A value theme with its
   problem / emotions / lead question / proof points / key sentence. */
.usp-item { border: 1px solid var(--border); border-radius: 8px; padding: 0.85rem 1rem; }
.usp-item__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; margin-bottom: 0.5rem;
}
.usp-item__fields { margin: 0; display: grid; gap: 0.5rem; }
.usp-item__field dt {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-faint); margin-bottom: 0.1rem;
}
.usp-item__field dd { margin: 0; font-size: 0.85rem; line-height: 1.4; }

/* Reminder callouts (ACRA + USP structure) — same green, with inner padding so
   the text doesn't hug the left edge. */
.reminder-card { border-radius: 8px; padding: 0.9rem 1.1rem; }
.reminder-card--acra,
.reminder-card--usp { background: #EFF7DD; border: 1px solid var(--green-l, #8CBB45); }
.reminder-list { margin: 0; display: grid; gap: 0.4rem; }
.reminder-row { display: grid; grid-template-columns: 8rem 1fr; gap: 0.5rem; align-items: baseline; }
.reminder-row dt { font-weight: 600; font-size: 0.85rem; }
.reminder-row dd { margin: 0; font-size: 0.85rem; color: var(--text-faint); }
@media (max-width: 600px) { .reminder-row { grid-template-columns: 1fr; gap: 0.1rem; } }

/* Shared USP library table — let the structured columns breathe. */
.usp-table td { white-space: pre-line; }

/* PDF preview ("fiche") — the on-screen rendering that IS the print source. */
.fiche-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin: 1.75rem 0 0.75rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.download-btn { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Product selector toolbar: dropdown on the left, Add + Delete on the right. */
.prod-toolbar {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: end; gap: 1rem; margin-bottom: 1.25rem;
}
.prod-selector label { display: block; font-size: 0.8rem; color: var(--text-faint); margin-bottom: 0.2rem; }
.prod-selector select { min-width: 22rem; }
.prod-toolbar__actions { display: flex; gap: 0.6rem; }

/* Red, filled "danger" button (e.g. delete a product). */
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { filter: brightness(0.93); }

.fiche { display: grid; gap: 1rem; }
/* Each card is white + bordered so the capture reads as a printed sheet. */
.fiche-card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 1.1rem 1.25rem;
}
/* Header card: green background (logo + name + description). */
.fiche-card--head {
  background: var(--brand-green, #A5CE5C);
  border-color: var(--brand-green, #A5CE5C);
  color: #1f2a10;
}
.fiche-logo { height: 38px; width: auto; display: block; margin-bottom: 0.5rem; }
.fiche-title { margin: 0; font-size: 1.3rem; color: #1f2a10; }
.fiche-desc { margin: 0.3rem 0 0; }
.fiche-card--head .text-faint { color: #3f5223; }
.fiche-card--head label { color: #1f2a10; }
/* Section header: title on the left, "Ajouter" button on the right. */
.fiche-section-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap;
}
/* The "attach an existing USP / objection" picker sits next to the add button.
   Its options are whole objection sentences, so it must be capped or it pushes
   the button off the right edge. */
.fiche-section-head select.fiche-addbtn { max-width: 15rem; }
.fiche-section-title {
  margin: 0; font-size: 1.25rem; font-weight: 700;
  color: var(--green, #5E7E24);
}
/* Generous vertical rhythm between blocks/fields so the printout breathes. */
.fiche-block { padding: 0.75rem 0; border-bottom: 1px dashed var(--border); }
.fiche-block:last-of-type { border-bottom: none; }
/* In-place editing highlight (no modal). */
.fiche-block--editing {
  background: var(--bg-alt, #f7f8f4); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.85rem 1rem; margin: 0.6rem 0;
}
.fiche-block__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; margin-bottom: 0.4rem;
}
/* Three-line grip at the top right of a block: drag it to reorder the list. */
.fiche-drag {
  display: inline-flex; align-items: center; padding: 0.25rem;
  color: var(--text-faint); cursor: grab; touch-action: none;
}
.fiche-drag:hover { color: var(--green, #5E7E24); }
.fiche-drag:active { cursor: grabbing; }
.fiche-block--dragging { opacity: 0.45; }
.fiche-block__name { font-weight: 600; }
.fiche-field { margin: 0.45rem 0; }
.fiche-field__label {
  font-size: 0.85rem; font-weight: 700; color: var(--text, #1f2937);
  margin-bottom: 0.1rem;
}
.fiche-field__value { font-size: 0.82rem; line-height: 1.4; white-space: pre-line; }
/* Empty field → a blank ruled line so the printout leaves room to fill in. */
.fiche-field__blank { height: 1.1rem; border-bottom: 1px dotted var(--border); }

/* Full-screen overlay while the PDF generates (ported from Seneko's reports). */
.pdf-loading-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.85); gap: 0.5rem;
}
.pdf-loading-overlay.active { display: flex; }
.pdf-loading-spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 4px solid var(--border); border-top-color: var(--green, #5E7E24);
  animation: pdf-spin 0.8s linear infinite;
}
@keyframes pdf-spin { to { transform: rotate(360deg); } }
.pdf-loading-text { font-weight: 600; }
.pdf-loading-sub { font-size: 0.85rem; color: var(--text-faint); }

/* Objection library table (Bibliothèque › Objections), inline-editable for
   privileged users. */
.objlib-table { font-size: 0.72rem; line-height: 1.3; border-collapse: collapse; width: 100%; }
.objlib-table th, .objlib-table td {
  vertical-align: top; min-width: 11rem;
  padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--border);
}
/* Sticky header so columns stay labelled while scrolling the long list. */
.objlib-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-ui); color: var(--text-faint);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  text-align: left; white-space: nowrap;
}
/* The "ACRA" band grouping the 4 framework columns. */
.objlib-table .objlib-acra-band {
  text-align: center; color: var(--accent); letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
}
/* Zebra striping + hover highlight. */
.objlib-table tbody tr:nth-child(even) { background: var(--bg-alt); }
.objlib-table tbody tr:hover { background: #EFF7DD; }
.objlib-table .objlib-cat { white-space: nowrap; min-width: 0; }
.objlib-table .objlib-chip {
  display: inline-block; font-weight: 600; font-size: 0.72rem;
  color: var(--green); background: #EFF7DD; border: 1px solid #D8E8B0;
  padding: 0.1rem 0.55rem; border-radius: 999px; white-space: nowrap;
}
.objlib-table .objlib-obj { font-weight: 600; color: var(--text); }
.objlib-table .objlib-actions { min-width: 0; text-align: center; }
.objlib-table td[contenteditable] { cursor: text; }
.objlib-table td[contenteditable]:hover { background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
.objlib-table td[contenteditable]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--bg);
}

/* =========================================================
   Dashboard — section bands + stat cards (used by the React
   dashboard island; moved here from the old Jinja template).
   ========================================================= */
.dash-section {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.92rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--paper);
  background: linear-gradient(135deg, var(--green), var(--green-l));
  margin: 2.25rem calc(-1 * var(--gap)) 1.1rem;
  padding: 0.55rem var(--gap);
  border-top: 2px solid #fff; border-bottom: 2px solid #fff;
}
.dash-section:first-of-type { margin-top: 0.5rem; }
.dash-section__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.92);
}
.dash-section__badge .icon { width: 18px; height: 18px; stroke-width: 1.9; }
.dash-section--competence .dash-section__badge { color: var(--green); }
.dash-section--objection  .dash-section__badge { color: var(--blue); }

.card.stat-card {
  display: flex; align-items: center; gap: 0.9rem;
  background: #EFF7DD;
  border-color: #D8E8B0;
}
.card.stat-card:hover { border-color: #C2D98C; }
/* Clickable stat cards: inherit text color (not link blue), pointer + lift. */
a.stat-card--link {
  text-decoration: none; color: inherit; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
a.stat-card--link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.stat-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  background: #fff; color: var(--green);
}
.stat-card__icon .icon { width: 22px; height: 22px; stroke-width: 1.8; }
.stat-card__body { min-width: 0; }
.dash-quickstart { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* "Prochaine session" block — micro-skill heading + meta chips */
.next-session__title {
  font-size: 1.3rem; font-weight: 700; line-height: 1.3;
  margin: 0.45rem 0 0.75rem; color: var(--text);
}
.next-session__meta { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ns-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; color: var(--text-faint);
  background: var(--bg-ui); border: 1px solid var(--border);
  padding: 0.22rem 0.6rem; border-radius: 999px;
}
.ns-chip .icon { width: 13px; height: 13px; stroke-width: 1.9; flex-shrink: 0; }

/* =========================================================
   Utilities
   ========================================================= */
.text-faint { color: var(--text-faint); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-2 { margin-bottom: 1rem; }
.gap-1 { gap: 0.5rem; }
.flex { display: flex; }
.items-center { align-items: center; }

/* =========================================================
   Topbar — user info + logout
   ========================================================= */
.topbar__user {
  color: var(--paper);
  font-size: 0.9rem;
  padding: 0 0.75rem;
}
.topbar__user strong { color: var(--paper); font-weight: 600; }

.topbar__logout {
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  margin-left: 0.5rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.topbar__logout--danger {
  color: var(--paper);
  background: var(--red-l);
  border: 1px solid var(--red-l);
}
.topbar__logout--danger:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
  text-decoration: none;
}

/* =========================================================
   Language switcher
   ========================================================= */
.lang-switcher {
  display: flex;
  gap: 0.15rem;
  padding: 0.15rem;
  background: var(--base-850);
  border-radius: var(--radius);
}
.lang-switcher__opt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  color: var(--base-400);
  border-radius: 4px;
}
.lang-switcher__opt:hover {
  color: var(--paper);
  text-decoration: none;
}
.lang-switcher__opt.is-active {
  background: var(--brand-green);
  color: var(--black);
}

/* =========================================================
   Program switcher (dashboard dropdown)
   ========================================================= */
.card__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.program-switcher {
  position: relative;
}
.program-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  max-width: 240px;
}
.program-switcher__btn:hover { background: var(--base-100, #f3f4f6); }
.program-switcher__label { color: var(--text-faint, var(--base-400)); font-weight: 400; }
.program-switcher__name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.program-switcher__chevron {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.15s;
}
.program-switcher__btn[aria-expanded="true"] .program-switcher__chevron {
  transform: rotate(180deg);
}
.program-switcher__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  max-width: 320px;
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  background: var(--paper);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 1000;
}
.program-switcher__menu li { margin: 0; }
.program-switcher__menu form { margin: 0; }
.program-switcher__opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
}
.program-switcher__opt:hover { background: var(--base-100, #f3f4f6); }
.program-switcher__opt.is-active {
  background: var(--brand-green);
  color: var(--paper);
  font-weight: 600;
}

/* =========================================================
   Sidebar role tag (shown for teacher/developer)
   ========================================================= */
.sidebar__role-tag {
  display: inline-block;
  margin: 0.5rem 1rem 0;
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--brand-green);
  color: var(--black);
  border-radius: 99px;
}

/* =========================================================
   Centered main (login page)
   ========================================================= */
.main--centered {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
}

/* =========================================================
   Login card
   ========================================================= */
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.login-card--wide { max-width: 480px; }
.login-card .grid-2 { gap: 0.75rem; }
.login-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.login-card__subtitle {
  font-size: 0.875rem;
  color: var(--text-faint);
  margin-bottom: 1.5rem;
}
.login-card__submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.5rem;
}

/* =========================================================
   Onboarding (first-login guided tour entry point)
   ========================================================= */
.onboarding {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
}
.onboarding__card {
  width: 100%;
  max-width: 540px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.onboarding__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.onboarding__subtitle {
  color: var(--text-faint);
  margin-bottom: 1.5rem;
}
.onboarding__intro {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}
.onboarding__actions {
  display: flex;
  gap: 0.75rem;
}
.sidebar__replay {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.8125rem;
  color: var(--text-faint);
  text-decoration: none;
}
.sidebar__replay:hover { color: var(--text); }

/* =========================================================
   Preparation card (permanent pre-session checklist)
   ========================================================= */
.prep-card {
  border-left: 3px solid var(--brand, #2c7a7b);
}
.prep-card__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
}
.prep-card__summary::-webkit-details-marker { display: none; }
.prep-card__summary::after {
  content: "▾";
  color: var(--text-faint);
  font-size: 0.875rem;
  transition: transform 0.15s;
}
.prep-card[open] .prep-card__summary::after { transform: rotate(180deg); }
.prep-card__list {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 1rem 0 0;
}
.prep-card__list li { margin-bottom: 0.75rem; }
.prep-card__q {
  margin: 0;
  font-weight: 500;
}
.prep-card__hint {
  margin: 0.15rem 0 0;
  color: var(--text-faint);
  font-size: 0.8125rem;
  font-style: italic;
}

/* =========================================================
   Skills library — collapsible tree
   ========================================================= */
.lib-search {
  width: 280px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.lib-tree { font-size: 0.875rem; }

.lib-domain {
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  background: var(--bg);
}
.lib-domain__name {
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: 0.04em;
  list-style: none;
}
.lib-domain__name::-webkit-details-marker { display: none; }
.lib-domain__name::before {
  content: "▸ ";
  color: var(--text-faint);
  display: inline-block;
  transition: transform 0.15s;
}
.lib-domain[open] > .lib-domain__name::before { content: "▾ "; }

.lib-comp {
  margin: 0.5rem 0 0.5rem 1rem;
}
.lib-comp > summary {
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0;
  color: var(--accent);
  list-style: none;
}
.lib-comp > summary::-webkit-details-marker { display: none; }
.lib-comp > summary::before {
  content: "▸ ";
  color: var(--text-faint);
}
.lib-comp[open] > summary::before { content: "▾ "; }

.lib-sous { margin: 0.4rem 0 0.4rem 1rem; }
.lib-sous__name {
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.lib-micros {
  list-style: none;
  padding-left: 1rem;
}
.lib-micro {
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--border);
}
.lib-micro:last-child { border-bottom: none; }
.lib-micro__name { color: var(--text); }
.lib-micro__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.lib-micro__actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
/* Hover-only reveal so the read-only view stays uncluttered. */
.lib-micro__actions { opacity: 0; transition: opacity 0.12s; }
.lib-micro:hover .lib-micro__actions,
.lib-micro:focus-within .lib-micro__actions { opacity: 1; }

/* Contextual "+ add" buttons in the tree (shown only in edit mode). */
.lib-add-btn {
  margin-left: 0.6rem; border: 1px dashed var(--border); background: none;
  color: var(--accent); cursor: pointer; font: inherit; font-size: 0.72rem;
  font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px;
  vertical-align: middle;
}
.lib-add-btn:hover { border-color: var(--accent); background: #EFF7DD; }

/* =========================================================
   Session reflection — guided "Avant / Après" controls
   ========================================================= */
.session-block {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; background: var(--bg);
}
.session-block__title {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 1rem; font-weight: 600; margin: 0 0 1.1rem;
}
.session-block__step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}

/* Single-select pill chips (type, durée) */
.choice-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice-chip {
  border: 1px solid var(--border); background: var(--bg-ui); color: var(--text-faint);
  border-radius: 999px; padding: 0.4rem 0.9rem; font: inherit; font-size: 0.85rem;
  font-weight: 600; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.choice-chip:hover { border-color: var(--accent); color: var(--text); }
.choice-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 1–5 numbered energy scale */
.scale { max-width: 18rem; }
.scale__row { display: flex; gap: 0.4rem; }
.scale__btn {
  flex: 1; height: 2.6rem; border: 1px solid var(--border); background: var(--bg-ui);
  color: var(--text-faint); border-radius: 10px; font: inherit; font-size: 0.95rem;
  font-weight: 700; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
}
.scale__btn:hover { border-color: var(--accent); color: var(--text); }
.scale__btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.scale__labels { display: flex; justify-content: space-between; font-size: 0.72rem; margin-top: 0.35rem; }

/* 1–5 star self-score */
.stars { display: flex; align-items: center; gap: 0.2rem; }
.star { background: none; border: none; cursor: pointer; padding: 0.1rem; color: var(--border); line-height: 0; }
.star svg { width: 26px; height: 26px; fill: currentColor; }
.star:hover { color: var(--yellow-l); }
.star.is-on { color: var(--yellow); }
.stars__value { margin-left: 0.5rem; font-size: 0.8rem; }

.lib-criteria {
  list-style: disc inside;
  margin-top: 0.25rem;
  padding-left: 0.5rem;
  color: var(--text-faint);
  font-size: 0.8125rem;
}

/* =========================================================
   Program builder — checkboxes + per-row priority + sticky footer
   ========================================================= */
.builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.builder-tree { padding-bottom: 1rem; }

.builder-micros { padding-left: 0; }

.builder-micro {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px dashed var(--border);
}
.builder-micro:hover { background: var(--bg-alt); }

.builder-micro__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  cursor: pointer;
  margin: 0;
  font-weight: 400;
}
.builder-micro__row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--brand-green);
}
.builder-micro__name { color: var(--text); }

.builder-micro .prio {
  width: 110px;
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.builder-footer {
  /* Fixed: always pinned at the viewport bottom regardless of scroll position.
     Left offset matches the sidebar so the footer aligns with `.main`.   */
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w);
  right: 0;
  z-index: 50;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bg);
  border-top: 2px solid var(--border);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.04);
  transition: background 0.2s, border-top-color 0.2s;
}

/* State-driven background tint (all greens — same hue as the brand mark) */
.builder-footer.is-unbalanced {
  background: #EFF7DD;            /* light brand-green tint */
  border-top-color: var(--brand-green);
}
.builder-footer.is-balanced {
  background: var(--brand-green);  /* solid brand green */
  border-top-color: var(--green);
  color: var(--black);
}
.builder-footer.is-balanced .text-faint,
.builder-footer.is-balanced .builder-counter__msg {
  color: var(--black);
}

/* Page-bottom padding so the last skill row isn't hidden by the fixed footer */
#program-form { padding-bottom: 6rem; }

.builder-counter {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.builder-counter strong { font-size: 1.6rem; font-weight: 700; }
.builder-counter__msg {
  margin-left: 0.75rem;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text);
}

/* =========================================================
   Progress bar (program detail / dashboard)
   ========================================================= */
.progress-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.progress-row {
  display: grid;
  grid-template-columns: 90px 1fr 50px;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
}
.progress-bar {
  height: 8px;
  background: var(--base-100);
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.3s;
}
.progress-bar__fill--expected { background: var(--base-400); }
.progress-bar__fill--actual   { background: var(--brand-green); }

/* =========================================================
   Skill card (shown above the session form)
   ========================================================= */
/* Session lesson meta (week / session chips + priority badge) */
.session-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.9rem; }
.prio-badge {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem; border-radius: 999px;
}
.prio-haute   { color: var(--red);    background: #F7E3E1; }
.prio-moyenne { color: var(--orange); background: #F7EAD9; }
.prio-basse   { color: var(--green);  background: #EFF7DD; }

/* Chosen-skill card */
.skill-card {
  padding: 1.1rem 1.2rem;
  background: var(--bg-alt);
  border-left: 4px solid var(--brand-green);
  border-radius: var(--radius);
}
.skill-card.is-connection { border-left-color: var(--green-l); }
.skill-card.is-closing    { border-left-color: var(--blue-l); }
.skill-card.is-objections { border-left-color: var(--orange-l); }
.skill-card.is-spin       { border-left-color: var(--purple-l); }
.skill-card.is-usp        { border-left-color: var(--cyan-l); }
.skill-card__head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.domain-pill {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.18rem 0.6rem; border-radius: 999px;
  color: var(--green); background: #EFF7DD; border: 1px solid #D8E8B0;
}
.domain-pill.is-connection { color: var(--green);  background: #EFF7DD; border-color: #D8E8B0; }
.domain-pill.is-closing    { color: var(--blue);   background: #E3ECF7; border-color: #C4D6EE; }
.domain-pill.is-objections { color: var(--orange); background: #FAEBE0; border-color: #EFD3BF; }
.domain-pill.is-spin       { color: var(--purple); background: #ECE7F5; border-color: #D6CBEC; }
.domain-pill.is-usp        { color: var(--cyan);   background: #DFEFEE; border-color: #BFDDDA; }
.skill-card__crumbs {
  font-size: 0.74rem; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.skill-card__sep { margin: 0 0.4rem; color: var(--border); }
.skill-card__micro {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 1.3rem; font-weight: 700; margin: 0.15rem 0 0; color: var(--text);
}
.skill-card__icon { width: 22px; height: 22px; stroke-width: 1.9; color: var(--accent); flex-shrink: 0; }
.skill-card.is-connection .skill-card__icon { color: var(--green); }
.skill-card.is-closing    .skill-card__icon { color: var(--blue); }
.skill-card.is-objections .skill-card__icon { color: var(--orange); }
.skill-card.is-spin       .skill-card__icon { color: var(--purple); }
.skill-card.is-usp        .skill-card__icon { color: var(--cyan); }
.skill-card__crit { margin-top: 0.9rem; }
.skill-card__crit-title {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint); margin: 0 0 0.4rem;
}
.skill-criteria { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.skill-criteria li { position: relative; padding-left: 1.4rem; font-size: 0.875rem; }
.skill-criteria li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 700;
}

/* =========================================================
   Quote card (green branded, white centered bold)
   ========================================================= */
.quote-card {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--paper);
  text-align: center;
  padding: 1.75rem 1.25rem;
}
.quote-card__text {
  font-style: italic;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--paper);
  margin: 0;
}

/* =========================================================
   Module-toggle UI + competence tree (admin user / invite forms)
   ========================================================= */
.module-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-weight: 400;
  margin: 0;
  font-size: 0.875rem;
}
.module-toggle:hover { background: var(--bg-alt); }
.module-toggle input[type="checkbox"] {
  accent-color: var(--brand-green);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.module-toggle input[type="checkbox"]:checked + span {
  color: var(--text);
  font-weight: 500;
}

.competence-group {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
}
.competence-group > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.95rem;
  padding: 0.25rem 0;
}
.competence-group > summary::-webkit-details-marker { display: none; }
.competence-group > summary::before {
  content: "▸ ";
  color: var(--text-faint);
  margin-right: 0.25rem;
}
.competence-group[open] > summary::before { content: "▾ "; }
.competence-domain {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.competence-domain input[type="checkbox"] {
  accent-color: var(--brand-green);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.competence-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding-left: 1.5rem;
}

/* =========================================================
   Danger button (red, for destructive actions)
   ========================================================= */
.btn-danger {
  background: var(--red-l);
  color: var(--paper);
  border-color: var(--red-l);
}
.btn-danger:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
  text-decoration: none;
}

.badge-red { background: #F5C5C0; color: var(--red); }

/* =========================================================
   Toast notifications (bottom-right stack, auto-dismiss)
   Wired via window.notify(msg, type) defined in main.js
   ========================================================= */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  max-width: 360px;
}
.toast {
  pointer-events: auto;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  background: var(--base-900);
  color: var(--paper);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: toast-in 0.18s ease-out;
}
.toast--success {
  background: var(--brand-green);
  color: var(--black);
  font-weight: 500;
}
.toast--error  { background: var(--red-l);    color: var(--paper); }
.toast--info   { background: var(--blue-l);   color: var(--paper); }
.toast--celebrate {
  background: linear-gradient(135deg, var(--brand-green), var(--green-l));
  color: var(--black);
  font-size: 1rem;
  font-weight: 600;
  padding: 1rem 1.25rem;
}
.toast--leaving { animation: toast-out 0.2s ease-in forwards; }

/* =========================================================
   Centered popup (notifyPopup) — used for unmistakable confirmations
   like "session saved" so the user sees feedback even after a reload.
   ========================================================= */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: popup-fade-in 0.16s ease-out;
}
.popup-overlay--leaving { animation: popup-fade-out 0.2s ease-in forwards; }

.popup-card {
  background: var(--paper);
  color: var(--text);
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  border-top: 6px solid var(--accent);
  max-width: 420px;
  animation: popup-pop-in 0.22s ease-out;
}
.popup-card--success    {
  background: var(--brand-green);
  color: var(--paper);
  border-top-color: transparent;
}
.popup-card--error      { border-top-color: var(--red);  color: var(--red); }
.popup-card--info       { border-top-color: var(--blue-l); }
.popup-card--celebrate {
  background: linear-gradient(135deg, var(--brand-green), var(--green-l));
  color: var(--paper);
  border-top-color: transparent;
  font-size: 1.25rem;
}

@keyframes popup-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes popup-fade-out { to   { opacity: 0; } }
@keyframes popup-pop-in   {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes toast-out {
  to { transform: translateY(20px); opacity: 0; }
}

/* =========================================================
   Sidebar flash messages (compact, color-coded, bottom of sidebar)
   ========================================================= */
.sidebar__flashes {
  margin-top: auto;             /* pins the block to the bottom of the flex sidebar */
  padding: 0.75rem 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sidebar__flash {
  font-size: 0.8125rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--base-400);
  background: var(--bg);
  color: var(--text);
  line-height: 1.35;
}
.sidebar__flash {
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s, max-height 0.25s, padding 0.25s, margin 0.25s;
  max-height: 200px;
  overflow: hidden;
}
.sidebar__flash--success    { border-left-color: var(--brand-green); background: #EFF7DD; }
.sidebar__flash--error      { border-left-color: var(--red);         background: #F5C5C0; color: var(--red); }
.sidebar__flash--info       { border-left-color: var(--blue-l);      background: #C8DCEF; color: var(--blue); }
.sidebar__flash--warning    { border-left-color: var(--orange-l);    background: #F5DCC8; color: var(--orange); }
.sidebar__flash--celebrate  {
  border-left-color: var(--brand-green);
  background: linear-gradient(135deg, var(--brand-green), var(--green-l));
  color: var(--paper);
  font-weight: 600;
}
.sidebar__flash--leaving {
  opacity: 0;
  transform: translateX(-8px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}

/* =========================================================
   Builder step indicator
   ========================================================= */
.step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--base-200);
  color: var(--text-faint);
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 0.25rem;
}
.step-dot.is-active {
  background: var(--brand-green);
  color: var(--paper);
}

/* =========================================================
   Calendar grid (Step 2 — drag-drop date editor)
   ========================================================= */
.cal-row {
  display: grid;
  grid-template-columns: 64px repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}
.cal-row--header { margin-bottom: 8px; }

.cal-cell {
  border-radius: 4px;
  padding: 0.35rem;
  font-size: 0.8125rem;
}
.cal-cell--label {
  font-weight: 600;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.cal-cell--header {
  text-align: center;
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.4rem 0;
}
.cal-cell--day {
  background: var(--bg-alt);
  border: 1px dashed transparent;
  min-height: 88px;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.cal-cell__date {
  font-size: 0.65rem;
  color: var(--text-faint);
  position: absolute;
  top: 4px;
  right: 6px;
}
.cal-cell--day.cal-cell--disabled {
  background: transparent;
  opacity: 0.35;
  pointer-events: none;
}
.cal-cell--day.is-droppable {
  border-color: var(--base-300);
  background: var(--bg);
}
.cal-cell--day.is-drop-target {
  border-color: var(--brand-green);
  background: #EFF7DD;
}
.cal-cell--day.is-conflict {
  background: #FCE7E5;
  border-color: var(--red);
  border-style: solid;
}

.cal-session {
  background: var(--brand-green);
  color: var(--paper);
  border-radius: 4px;
  padding: 0.35rem 0.45rem;
  margin-top: 0.9rem;   /* leave room for the date label in top-right */
  font-size: 0.7rem;
  cursor: grab;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: opacity 0.15s, transform 0.15s;
}
.cal-session:active { cursor: grabbing; }
.cal-session--dragging { opacity: 0.4; transform: scale(0.96); }
.cal-session__no {
  font-weight: 700;
  font-size: 0.65rem;
  opacity: 0.85;
  letter-spacing: 0.02em;
}
.cal-session__title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.cal-session__sub {
  font-size: 0.65rem;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
/* Stack multiple sessions in the same cell with a small gap */
.cal-cell--day .cal-session + .cal-session { margin-top: 0.3rem; }

/* =========================================================
   Modal (calendar export prompt after creating a program)
   ========================================================= */
.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 5000;
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}
.modal__panel {
  position: relative;
  width: 100%; max-width: 480px;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  animation: modal-in 0.18s ease-out;
}
/* Wider variant for modals holding tables (e.g. the products detail). */
.modal__panel--wide { max-width: 56rem; max-height: 85vh; overflow-y: auto; }
/* Edit-form variant: the USP / objection dialogs are long, so the panel is
   wider than the default 480px and scrolls inside itself rather than pushing
   the page. The form block inside drops its own card chrome — the modal panel
   already provides it. */
.modal__panel--form { max-width: 42rem; max-height: 88vh; overflow-y: auto; }
.modal__panel--form .fiche-block--editing {
  border: none; padding: 0; margin: 0; background: none;
}
.modal__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}
@keyframes modal-in {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1);      opacity: 1; }
}


/* ---- Prepared-meeting sheet (Prepare a Meeting) ---- */
/* .meeting-print is toggled on the sheet wrapper during PDF capture only:
   form controls flatten into a clean printable look, and the answer areas
   grow so there is room to handwrite notes during the meeting. Colours stay
   hex — html2canvas cannot rasterise oklch/color-mix. */
.meeting-print textarea {
  background: #FFFFFF;
  border: 1px solid #C9C6BC;
  box-shadow: none;
  min-height: 120px;
}
.meeting-print input[type="text"],
.meeting-print input[type="date"] {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  font-weight: 600;
}

/* Meeting-sheet cards print WHITE (screen keeps the app's cream cards). */
.meeting-print .card { background: #FFFFFF; }

/* ---- Product fiche PDF capture (.fiche-print, toggled during export) ---- */
/* USP / objection blocks flow in TWO columns, each boxed by a green dotted
   border so the eye separates them on paper. A lone last block simply stays in
   the LEFT column and leaves the right half empty (no centering) — nothing
   here overrides the normal grid flow. Colours stay hex: html2canvas cannot
   rasterise oklch / color-mix. */
.fiche-print .fiche-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  align-items: start;
}
.fiche-print .fiche-list > * {
  border: 2px dotted #8CBB45;
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
}
/* The USP's « Questions à poser au prospect » prints FIRST (right after the
   tag) and highlighted like the « Structure d'un USP » reminder: green box,
   bold darker-green text. */
.fiche-print .fiche-block { display: flex; flex-direction: column; }
.fiche-print .fiche-block__head { order: -2; }
.fiche-print .fiche-field--question {
  order: -1;
  background: #EFF7DD;
  border: 1px solid #8CBB45;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin: 0.45rem 0 0.6rem;
}
.fiche-print .fiche-field--question .fiche-field__label { color: #878580; font-weight: 700; }
.fiche-print .fiche-field--question .fiche-field__value { color: #5E7E24; font-weight: 700; }

/* ---------------------------------------------------------------------------
   Meeting Simulation — the speaking orb.
   The JS analyser writes the live audio amplitude into --level (0..1) on
   .sim-orb, so the rings track the prospect's ACTUAL voice rather than
   running a fixed loop. --level defaults to 0 so the orb is calm when idle.
--------------------------------------------------------------------------- */
.sim-orb {
  --level: 0;
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.sim-orb__core {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--brand-green);
  box-shadow: 0 0 calc(12px + var(--level) * 40px) rgba(165, 206, 92, 0.75);
  transform: scale(calc(1 + var(--level) * 0.35));
  transition: transform 60ms linear, box-shadow 60ms linear;
}
.sim-orb__ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--green-l);
  opacity: calc(0.15 + var(--level) * 0.55);
  transition: transform 90ms linear, opacity 90ms linear;
}
.sim-orb__ring:nth-of-type(1) {
  width: 108px; height: 108px;
  transform: scale(calc(1 + var(--level) * 0.30));
}
.sim-orb__ring:nth-of-type(2) {
  width: 150px; height: 150px;
  transform: scale(calc(1 + var(--level) * 0.22));
}
/* While the user speaks (orb otherwise still) a slow breath keeps it alive. */
.sim-orb:not(.sim-orb--speaking) .sim-orb__core { animation: sim-breathe 3.2s ease-in-out infinite; }
@keyframes sim-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .sim-orb__core, .sim-orb__ring { transition: none; animation: none; }
}

/* ---------------------------------------------------------------------------
   Foldable sidebar sections (Shell.jsx)
   The section label became a <button>; it keeps the .sidebar__label look and
   gains a chevron that rotates when open. A nested SubGroup (Training →
   Compétence) folds the same way one level in.
--------------------------------------------------------------------------- */
.sidebar__label--toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: calc(100% - 1rem);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.sidebar__label--toggle:hover { filter: brightness(1.25); }

.sidebar__chev {
  width: 0.7rem;
  height: 0.7rem;
  flex-shrink: 0;
  stroke-width: 3;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}

.sidebar__section.is-collapsed .sidebar__chev { transform: rotate(0deg); }

/* ---- planned-but-not-built entry ---- */
.sidebar__soon {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.1rem 0.5rem;
  padding: 0.45rem 0.75rem;
  border-left: 2px solid transparent;
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--text-faint);
  cursor: default;
}

.sidebar__badge {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  background: var(--bg-ui);
  color: var(--text-faint);
}

/* Badge marking a database row with no text for the active language
   (components/DbText.jsx). Deliberately quiet — it is a finding aid for the
   people filling the translations in, not a warning for everyone else. */
.i18n-missing {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
  background: var(--bg-ui);
  border: 1px dashed var(--border);
  color: var(--text-faint);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* ---- Product link board (Produits): drag USP / objection tags between the
   product box and the library box. Two pairs side by side = four boxes. ---- */
.linkboard { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 900px) { .linkboard { grid-template-columns: 1fr; } }
.linkboard__box {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 0.7rem 0.8rem; min-height: 8rem; background: var(--bg-alt);
  transition: background 0.12s, border-color 0.12s;
}
.linkboard__box.is-over { border-color: var(--green-l); background: #EFF7DD; }
.linkboard__title {
  margin: 0 0 0.55rem; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--green);
}
.linkboard__count { color: var(--text-faint); font-weight: 400; }
.linkboard__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.linkboard__empty { margin: 0; font-size: 0.82rem; color: var(--text-faint); }
.linkboard__chip {
  display: inline-flex; align-items: center; gap: 0.35rem; cursor: grab;
  max-width: 100%; padding: 0.25rem 0.6rem; border-radius: 999px;
  border: 1px solid #D8E8B0; background: #EFF7DD; color: var(--green);
  font-size: 0.82rem; font-weight: 600; font-family: inherit;
}
.linkboard__chip:hover { border-color: var(--green-l); }
.linkboard__chip:active { cursor: grabbing; }
.linkboard__chiptext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.linkboard__pairs { display: grid; gap: 1rem; }

/* ---- Tick-list picker dialog (PickerModal) ---- */
.picker-group { margin-bottom: 0.9rem; }
.picker-group__label {
  margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--green);
}
.picker-row {
  display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer;
  padding: 0.35rem 0.5rem; border-radius: 6px; font-size: 0.9rem;
}
.picker-row:hover { background: var(--bg-alt); }
.picker-row.is-checked { background: #EFF7DD; }
.picker-row input { margin-top: 0.2rem; flex-shrink: 0; }

/* ---- Inline spinner, for work that happens in place ---- */
.inline-spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em;
  border: 2px solid var(--border); border-top-color: var(--green, #5E7E24);
  border-radius: 50%; animation: pdf-spin 0.8s linear infinite;
}
.inline-loading { display: flex; align-items: center; gap: 0.5rem; }

/* ---- Meeting stepper: which step of the sequence you are preparing ---- */
.stepper { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.stepper__step {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  padding: 0.45rem 0.85rem; border-radius: 999px; font-family: inherit;
  font-size: 0.88rem; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg-alt); color: var(--text-faint);
}
.stepper__step:hover { border-color: var(--green-l); }
.stepper__step.is-active {
  background: var(--green); border-color: var(--green); color: #fff;
}
.stepper__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--border); color: var(--text); font-size: 0.75rem;
}
.stepper__step.is-active .stepper__no { background: rgba(255, 255, 255, 0.28); color: #fff; }
.stepper__step.has-sheets:not(.is-active) { color: var(--text); border-color: #D8E8B0; background: #EFF7DD; }
.stepper__count {
  font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.4rem;
  border-radius: 999px; background: rgba(0, 0, 0, 0.12);
}

/* ---- Client history rows (Prepare a meeting): which sheet is open ---- */
.histrow {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.35rem 0.5rem; border-radius: 6px;
}
.histrow__date { font-size: 0.8rem; color: var(--text-faint); min-width: 6rem; }
.histrow__label { font-size: 0.82rem; color: var(--text-faint); }
.histrow__btn { margin-left: auto; padding: 0.1rem 0.5rem; }
.histrow__flag { margin-left: auto; }
/* The sheet currently on screen, so the list says where you are. */
.histrow.is-current { background: #EFF7DD; box-shadow: inset 3px 0 0 var(--green); }
.histrow.is-current .histrow__date,
.histrow.is-current .histrow__label { color: var(--text); font-weight: 600; }

/* ---- Nested sidebar group (Role play → its four exercises) ---- */
.sidebar__sub { list-style: none; margin: 0.15rem 0 0.35rem; padding: 0 0 0 1.55rem; }
.sidebar__sub .sidebar-link { padding-top: 0.32rem; padding-bottom: 0.32rem; font-size: 0.86rem; }

/* ---- TreeNav: unfoldable Product → Segment (→ Client) navigation ---- */
.tree__root, .tree__children { list-style: none; margin: 0; padding: 0; }
.tree__empty { margin: 0 0 0.5rem; }
/* Children are indented and hang off a vertical rail, with an elbow per node. */
.tree__children { margin-left: 0.55rem; padding-left: 1.1rem; border-left: 1px solid var(--border); }
.tree__item { position: relative; }
.tree__children > .tree__item::before {
  content: ""; position: absolute; left: -1.1rem; top: 1.05rem;
  width: 0.8rem; border-top: 1px solid var(--border);
}
.tree__node {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  padding: 0.45rem 0.6rem; margin: 0.1rem 0; border-radius: 6px;
  border: 1px solid transparent; background: none; cursor: pointer;
  font-family: inherit; font-size: 0.92rem; color: var(--text); text-align: left;
}
.tree__node:hover { background: var(--bg-alt); }
.tree__node.is-active { background: #EFF7DD; border-color: #D8E8B0; font-weight: 600; color: var(--green); }
.tree__node.is-open { font-weight: 600; }
.tree__dot {
  width: 0.55rem; height: 0.55rem; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--green-l); background: transparent;
}
.tree__dot.is-open { background: var(--green); border-color: var(--green); }
.tree__node.is-active .tree__dot { background: var(--green); border-color: var(--green); }
.tree__label { flex: 1; }
.tree__meta { font-size: 0.78rem; color: var(--text-faint); font-weight: 400; }
.tree__node--add { color: var(--green); font-weight: 600; }
.tree__plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 0.95rem; height: 0.95rem; font-size: 0.95rem; line-height: 1;
}
.tree__addform { display: flex; gap: 0.4rem; align-items: center; margin: 0.25rem 0 0.25rem 0.6rem; }
.tree__addform input { flex: 1; min-width: 8rem; }

/* ---- TreeNavH: horizontal org-chart variant of the navigation tree ---- */
.htree__root { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.htree__row { display: flex; align-items: center; }
.htree__node {
  display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
  min-width: 13rem; max-width: 22rem;
  padding: 0.5rem 0.75rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-alt);
  cursor: pointer; font-family: inherit; font-size: 0.9rem;
  color: var(--text); text-align: left;
}
.htree__node:hover { border-color: var(--green-l); }
.htree__node.is-active,
.htree__node.is-open { background: #EFF7DD; border-color: #D8E8B0; font-weight: 600; color: var(--green); }
.htree__node--addwrap { border-style: dashed; padding: 0.3rem 0.5rem; cursor: default; }
.htree__node--addwrap:hover { border-color: var(--green-l); }

/* Stub from the parent box to the children rail. */
.htree__link { width: 1.6rem; border-top: 1px solid var(--border); flex-shrink: 0; }

.htree__children {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.4rem;
  border-left: 1px solid var(--border);
}
.htree__child { position: relative; padding-left: 1.5rem; }
/* Horizontal stub into each child. */
.htree__child::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1.5rem; border-top: 1px solid var(--border);
}
/* Trim the rail above the first child and below the last, turning the plain
   border into elbows. Painted in the card background so it reads as a gap. */
.htree__child:first-child::after,
.htree__child:last-child::after {
  content: ""; position: absolute; left: -1px; width: 2px; background: var(--bg);
}
.htree__child:first-child::after { top: 0; height: 50%; }
.htree__child:last-child::after { top: 50%; height: 50%; }
.htree__child:only-child::after { top: 0; height: 100%; }

.htree__nested { list-style: none; margin: 0; padding: 0; }
.htree__rootadd { margin-top: 0.5rem; }

@media (max-width: 900px) {
  /* Fall back to stacking: the fan-out needs horizontal room it doesn't have. */
  .htree__row { flex-direction: column; align-items: flex-start; }
  .htree__link { display: none; }
  .htree__children { margin-left: 1rem; }
}

/* The native file input's "Choose file / No file chosen" comes from the
   BROWSER's language and cannot be translated, so the real input is hidden
   inside a label styled as a button and we supply the wording ourselves. */
.file-btn { display: inline-flex; align-items: center; cursor: pointer; }
.file-btn input[type="file"] { display: none; }
.file-btn.is-busy { opacity: 0.6; pointer-events: none; }