/* ============================================================================
 * Octovision — l'habillage de la plateforme (menu, barre, atelier, dialogues).
 * Les rendus (site, slides, docs) ont leur feuille : rendus.css.
 * ========================================================================== */

:root {
  --bg: #F2F4F8;
  --panel: #FFFFFF;
  --panel-2: #F7F8FB;
  --hover: #EEF1F6;
  --ink: #1E293B;
  --ink-2: #475569;
  --ink-3: #7B879B;
  --line: #E2E7EE;
  --line-2: #ECEFF4;
  --brand: #2B87FF;
  --brand-deep: #1867BE;
  --brand-ink: #1867BE;
  --brand-soft: rgba(43, 135, 255, .1);
  --brand-line: rgba(43, 135, 255, .45);
  --on-brand: #FFFFFF;
  --danger: #C23A36;
  --danger-soft: #FBE6E5;
  --ok: #1E8A45;
  --ok-soft: #E2F5E6;
  --warn: #9A6A06;
  --vis-ph: linear-gradient(150deg, #EEF3FC, #EFEBF9);
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-2: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 34px -18px rgba(16, 24, 40, .22);
  --shadow-pop: 0 22px 60px -18px rgba(16, 24, 40, .38), 0 2px 8px rgba(16, 24, 40, .06);
  --font: 'Funnel Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Funnel Display', 'Funnel Sans', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --side-w: 296px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E141F;
    --panel: #161E2C;
    --panel-2: #1B2434;
    --hover: #222C3E;
    --ink: #F2F4F8;
    --ink-2: #C3CBD8;
    --ink-3: #8D99AD;
    --line: #2A3549;
    --line-2: #232D3F;
    --brand: #4C9BFF;
    --brand-deep: #2B87FF;
    --brand-ink: #8CC0FF;
    --brand-soft: rgba(76, 155, 255, .15);
    --brand-line: rgba(76, 155, 255, .5);
    --on-brand: #06111F;
    --danger: #F4A3A0;
    --danger-soft: rgba(232, 107, 103, .16);
    --ok: #9BE3A8;
    --ok-soft: rgba(108, 195, 106, .16);
    --warn: #F9D98A;
    --vis-ph: linear-gradient(150deg, #1E293B, #221F3D);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -18px rgba(0, 0, 0, .6);
    --shadow-pop: 0 22px 60px -18px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E141F;
  --panel: #161E2C;
  --panel-2: #1B2434;
  --hover: #222C3E;
  --ink: #F2F4F8;
  --ink-2: #C3CBD8;
  --ink-3: #8D99AD;
  --line: #2A3549;
  --line-2: #232D3F;
  --brand: #4C9BFF;
  --brand-deep: #2B87FF;
  --brand-ink: #8CC0FF;
  --brand-soft: rgba(76, 155, 255, .15);
  --brand-line: rgba(76, 155, 255, .5);
  --on-brand: #06111F;
  --danger: #F4A3A0;
  --danger-soft: rgba(232, 107, 103, .16);
  --ok: #9BE3A8;
  --ok-soft: rgba(108, 195, 106, .16);
  --warn: #F9D98A;
  --vis-ph: linear-gradient(150deg, #1E293B, #221F3D);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -18px rgba(0, 0, 0, .6);
  --shadow-pop: 0 22px 60px -18px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
code { font-family: var(--font-mono); font-size: .9em; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ic { flex: none; display: block; }
[hidden] { display: none !important; }

/* ---------- briques ---------- */

.lbl {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ib {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.ib:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.ib:disabled { opacity: .35; }
.ib--sm { width: 26px; height: 26px; border-radius: 7px; }
.ib--danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 650;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.btn:hover:not(:disabled) { background: var(--hover); }
.btn:disabled { opacity: .45; }
.btn--sm { height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
.btn--block { width: 100%; }
.btn--solid { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn--solid:hover:not(:disabled) { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn--danger { background: var(--danger); border-color: var(--danger); color: #FFFFFF; }
.btn--danger:hover:not(:disabled) { filter: brightness(.94); background: var(--danger); }
.linkbtn {
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--brand-ink);
  font-size: 12.5px;
  font-weight: 650;
}
.linkbtn:hover { text-decoration: underline; }
.select, .input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 600;
}
.select {
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237B879B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  text-overflow: ellipsis;
}
.select:disabled { opacity: .55; }
.input:focus, .select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.check {
  appearance: none;
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  border: 1.6px solid var(--ink-3);
  border-radius: 5px;
  background: var(--panel);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.check::after {
  content: '';
  width: 10px;
  height: 6px;
  margin-top: -2px;
  border: solid var(--on-brand);
  border-width: 0 0 2.2px 2.2px;
  transform: rotate(-45deg) scale(0);
  transition: transform .15s;
}
.check:checked { background: var(--brand); border-color: var(--brand); }
.check:checked::after { transform: rotate(-45deg) scale(1); }

/* ---------- la mise en page ---------- */

.app { height: 100vh; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
.main { min-width: 0; display: flex; flex-direction: column; height: 100vh; container: main / inline-size; }
.scroll { flex: 1; min-height: 0; overflow: auto; scroll-padding-top: 16px; }

/* ---------- le menu de gauche ---------- */

.side {
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.side__brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px; }
.side__mark { display: grid; }
.side__name { flex: 1; font-family: var(--font-display); font-size: 19px; font-weight: 750; letter-spacing: -0.01em; }
.side__close { display: none; }
.side__sel { display: flex; flex-direction: column; gap: 7px; padding: 6px 16px 14px; border-bottom: 1px solid var(--line); }
.side__sel .lbl:not(:first-child) { margin-top: 8px; }
.sel-row { display: flex; align-items: center; gap: 2px; }
.sel-row .select { margin-right: 4px; }
/* Les scénarios, rattachés au master au-dessus d'eux. */
.side__child {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 8px 0 0 8px;
  padding: 6px 6px 6px 13px;
  border-left: 2px solid var(--line);
  border-radius: 0 10px 10px 0;
}
.side__child.is-flash { animation: scn-flash 1s ease; }
@keyframes scn-flash { 0%, 35% { background: var(--brand-soft); border-left-color: var(--brand); } }
.lbl__n {
  display: inline-block;
  min-width: 17px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--line-2);
  color: var(--ink-2);
  font-size: 10.5px;
  letter-spacing: 0;
  text-align: center;
}
.scn__create { align-self: flex-start; margin-top: 9px; }
.scn {
  margin-top: 2px;
  padding: 10px 11px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
}
.scn__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.scn__count { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.scn__count strong { color: var(--ink); }
.scn.is-master .scn__bulk, .scn.is-master .switch { display: none; }
.scn__bulk { display: inline-flex; gap: 2px; flex: none; }
.switch { display: flex; align-items: center; gap: 9px; margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__ui { position: relative; width: 30px; height: 18px; flex: none; border-radius: 999px; background: var(--line); transition: background-color .2s; }
.switch__ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch input:checked + .switch__ui { background: var(--brand); }
.switch input:checked + .switch__ui::after { transform: translateX(12px); }
.switch input:focus-visible + .switch__ui { outline: 2px solid var(--brand); outline-offset: 2px; }

.side__list { flex: 1; min-height: 0; overflow: auto; padding: 8px 8px 12px; }
.side__empty { margin: 14px 10px; color: var(--ink-3); font-size: 13px; }
.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 4px 0 8px;
  border-radius: 9px;
  transition: background-color .12s, opacity .2s;
}
.row:hover { background: var(--hover); }
.row.is-active { background: var(--brand-soft); }
.row.is-active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--brand); }
.row.is-off .row__main, .row.is-off .row__del { opacity: .4; }
.row.is-dragging { opacity: .35; }
.row.drop-before { box-shadow: inset 0 2px 0 var(--brand); }
.row.drop-after { box-shadow: inset 0 -2px 0 var(--brand); }
.row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border: 0;
  background: none;
  text-align: left;
}
.row__num { flex: none; width: 22px; color: var(--ink-3); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.row__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.row__steps {
  flex: none;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--line-2);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.row__err { display: none; color: var(--danger); }
.row.has-error .row__err { display: block; }
.row__del { opacity: 0; }
.row:hover .row__del, .row:focus-within .row__del { opacity: 1; }
.orphans { margin: 12px 6px 0; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; color: var(--warn); font-size: 12.5px; }
.orphans p { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; }
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 4px 2px 0;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 12px;
  font-family: var(--font-mono);
}
.side__foot { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.live { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--ink-3); font-size: 12px; }
.live .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ECA78; box-shadow: 0 0 0 3px rgba(78, 202, 120, .2); }
.live.is-down { color: var(--danger); }
.live.is-down .dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

/* ---------- la barre du haut ---------- */

.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.bar__menu { display: none; }
/* L'invité (et la « Vue contributeur ») : le menu de gauche garde le logo et la liste des slides,
   sans « Master scénario » (son choix, ses scénarios) ni le pied ; dans plusieurs masters, le titre
   de la barre devient un choix. Il ne doit pas voir qu'il y a des masters derrière. */
html.is-invite .side__sel, html.is-invite .side__foot, html.is-invite .row__err { display: none !important; }
html.is-invite .r-site__hero .r-kicker, html.is-invite .ix-view__intro .r-kicker { display: none; } /* ni « Master scénario » */
.bar__msel { max-width: 100%; padding: 2px 26px 2px 6px; margin-left: -6px; border: 1px solid transparent; border-radius: 8px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center; color: inherit; font: inherit; font-weight: inherit; letter-spacing: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.bar__msel:hover, .bar__msel:focus-visible { border-color: var(--line); background-color: var(--hover); outline: none; }
/* Écran large : le menu de gauche se masque (bouton en haut du menu) et se réaffiche (bouton de la barre) */
.side__close .side__x { display: none; }
.side__close .side__fold { display: inline-grid; }
@media (min-width: 921px) {
  .side__close { display: inline-grid; color: var(--ink-3); }
  html.side-hidden .app:not(.is-chat) { grid-template-columns: minmax(0, 1fr); }
  html.side-hidden .side { display: none; }
  html.side-hidden:not(.chat-open) .bar__menu { display: inline-grid; }
}
.bar__title { flex: 1; min-width: 0; }
.bar__title h1 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.bar__title p { margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 12.5px; }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--line-2); }
.seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 650;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
.bar__actions { display: flex; align-items: center; gap: 6px; }
/* La barre suit sa propre largeur (le menu de gauche ouvert ou non) : les vues gardent leur
   icône, seule la vue active garde son nom ; Présenter, « Vue contributeur » et le nom se
   réduisent à leur icône. */
@container main (max-width: 1260px) {
  #views button:not([aria-selected="true"]) span { display: none; }
  #views button:not([aria-selected="true"]) { padding: 0 9px; }
  #btn-present span, .sim > span:last-child, .me__name { display: none; }
  #btn-present { width: 36px; padding: 0; justify-content: center; }
  .sim { padding: 0 8px; }
  .bar { gap: 10px; }
}
@container main (max-width: 860px) {
  #views button span { display: none; }
  #views button { padding: 0 9px; }
  .bar__title p { display: none; }
}

/* ---------- télécharger : le menu ---------- */

.dl { position: relative; }
.dl__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 330px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-pop);
  animation: dl-in .14s ease-out;
}
@keyframes dl-in { from { opacity: 0; transform: translateY(-4px); } }
.dl__group { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 10px 10px 6px; }
.dl__group + .dl__item { margin-top: 0; }
.dl__what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 650; font-size: 13px; }
.dl__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.dl__item:hover, .dl__item:focus-visible { background: var(--hover); outline: none; }
.dl__fmt {
  flex: none;
  width: 44px;
  padding: 3px 0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-align: center;
  color: #FFFFFF;
}
.dl__fmt--png { background: #1F8A4C; }
.dl__fmt--pdf { background: #C23A36; }
.dl__fmt--pptx { background: #C2562B; }
.dl__fmt--pptx-edit { background: transparent; color: #C2562B; box-shadow: inset 0 0 0 1.5px #C2562B; } /* modifiable */
.dl__desc { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.dl__desc small { display: block; color: var(--ink-3); font-size: 12px; }
.dl__item--print { color: var(--ink-2); }
.dl__item--print .ic { margin: 0 14px 0 15px; }
.dl__none { margin: 0; padding: 4px 10px 8px; color: var(--ink-3); font-size: 12.5px; }
.dl__sep { height: 1px; margin: 6px 4px; background: var(--line-2); }

/* ---------- les versions d'un slide (en-tête de la carte) ---------- */

.ver { position: relative; }
.ver__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  max-width: 220px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
}
.ver__btn:hover { background: var(--hover); }
.ver__btn .ic { color: var(--ink-3); flex: none; }
.ver__id { color: var(--brand-ink); font-weight: 800; flex: none; }
.ver__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.ver__n { flex: none; min-width: 17px; padding: 0 5px; border-radius: 999px; background: var(--line-2); color: var(--ink-3); font-size: 10.5px; text-align: center; }
.ver__menu { width: 320px; }
.ver__item { align-items: flex-start; }
.ver__mark { flex: none; width: 18px; padding-top: 1px; color: var(--brand); display: grid; place-items: center; }
.ver__item .dl__desc strong { color: var(--ink); }
.ver__item.is-active { background: var(--brand-soft); }
.ver__item--danger, .ver__item--danger .ver__mark { color: var(--danger); }
.row__cmp { flex: none; display: inline-grid; place-items: center; color: var(--brand-ink); }
.row__ver { flex: none; padding: 0 5px; border-radius: 5px; background: var(--brand-soft); color: var(--brand-ink); font-size: 10.5px; font-weight: 800; line-height: 17px; }

/* L'export en cours : une barre en bas à droite. */
.progress {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 61;
  width: min(360px, calc(100vw - 36px));
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-pop);
}
.progress__label { margin: 0 0 9px; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress__bar { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.progress__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brand); transition: width .3s ease; }

/* ---------- vide ---------- */

.empty {
  max-width: 520px;
  margin: 12vh auto;
  padding: 0 24px;
  text-align: center;
}
.empty__mark { display: inline-grid; margin-bottom: 14px; }
.empty h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 24px; letter-spacing: -0.01em; }
.empty p { margin: 0 0 20px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }

/* ---------- un visuel (le slide dans son cadre) ---------- */

.vis {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--vis-ph);
  box-shadow: var(--shadow-2);
}
.vis iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.vis--thumb iframe { pointer-events: none; }
.stepbar { display: flex; align-items: center; gap: 4px; min-height: 30px; }
.stepbar__label { min-width: 104px; color: var(--ink-2); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: center; }
.stepbar__pips { display: inline-flex; gap: 5px; margin-left: 8px; }
.pip { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line); transition: background-color .15s, transform .15s; }
.pip:hover { background: var(--ink-3); }
.pip.is-on { background: var(--brand); transform: scale(1.2); }
.stepbar.is-single .ib, .stepbar.is-single .stepbar__pips { display: none; }
.stepbar.is-single .stepbar__label { min-width: 0; text-align: left; color: var(--ink-3); font-weight: 500; }

/* ---------- l'atelier ---------- */

.view { min-height: 100%; }
.view--atelier { padding: 22px 22px 60vh; }
.wkl { display: flex; flex-direction: column; gap: 22px; max-width: 1240px; margin: 0 auto; container-type: inline-size; }
.wk {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  scroll-margin-top: 16px;
  transition: opacity .2s, border-color .2s, box-shadow .2s;
}
.wk.is-active { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); }
.wk.is-off { opacity: .42; }
.wk.is-off:hover, .wk.is-off:focus-within { opacity: .8; }
.hide-off .is-off { display: none !important; }
.wk.is-drop { outline: 2px dashed var(--brand); outline-offset: 4px; }
.wk__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; }
.wk__check[hidden] { display: none; }
.wk__num {
  flex: none;
  min-width: 36px;
  height: 30px;
  padding: 0 8px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 30px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.wk__titles { flex: 1; min-width: 0; }
.wk__title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.wk__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; }
.wk__meta code { color: var(--ink-2); }
.wk__meta .sep { opacity: .5; }
.wk__meta .warn { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); }
.wk__flag { display: none; padding: 0 7px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); font-weight: 650; }
.wk.is-off .wk__flag { display: inline-block; }
.wk__meta .sep:has(+ .wk__flag) { display: none; }
.wk.is-off .wk__meta .sep:has(+ .wk__flag) { display: inline; }
.wk__actions { display: flex; align-items: center; gap: 4px; }
.wk__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 16px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
}
.wk__error .ic { margin-top: 2px; }
.wk__body {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 300px;
  gap: 18px;
  padding: 0 16px 14px;
}
/* Le descriptif, à gauche : contexte, objectifs, restrictions, historique. */
.wk__desc {
  min-width: 0;
  height: 0; /* la hauteur de la rangée vient de l'aperçu ; le descriptif défile dedans */
  min-height: 100%;
  overflow: auto;
  padding: 2px 14px 2px 0;
  border-right: 1px solid var(--line-2);
}
.wk__dgrid { display: flex; flex-direction: column; gap: 14px; }
.wk__dsec { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tx--desc { font-size: 13px; line-height: 1.5; }
.tx--desc ul, .tx--desc ol { padding-left: 1.1em; }
.tx--desc p, .tx--desc ul, .tx--desc ol { margin-bottom: .45em; }
.wk__hist summary { display: flex; align-items: center; gap: 7px; list-style: none; cursor: pointer; }
.wk__hist summary::-webkit-details-marker { display: none; }
.wk__hist summary .ic { margin-left: auto; color: var(--ink-3); transition: transform .2s; }
.wk__hist[open] summary .ic { transform: rotate(180deg); }
.wk__hist .tx { margin-top: 6px; color: var(--ink-3); font-size: 12.5px; }
.wk__hcount { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); font-size: 10.5px; font-weight: 700; text-align: center; }
.wk__stage { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wk__court {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-height: var(--court-h, 420px);
  overflow: auto;
  padding: 2px 4px 2px 0;
}
.wk__court .tx { font-size: 14.5px; }
.wk__long { border-top: 1px solid var(--line-2); }
.wk__long summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  list-style: none;
  cursor: pointer;
}
.wk__long summary::-webkit-details-marker { display: none; }
.wk__long summary:hover { background: var(--panel-2); }
.wk__long summary .ic { margin-left: auto; color: var(--ink-3); transition: transform .2s; }
.wk__long[open] summary .ic { transform: rotate(180deg); }
.wk__read { color: var(--ink-3); font-size: 12.5px; }
.wk__long .tx { max-width: 760px; padding: 4px 16px 18px 26px; font-size: 15px; }
.wk__sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--line-2);
}
.wk__files { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wk__nofiles { color: var(--ink-3); font-size: 12.5px; }
.file {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 260px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--ink-2);
  font-size: 12.5px;
  text-decoration: none;
}
.file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file em { font-style: normal; color: var(--brand-ink); font-size: 11px; font-weight: 700; }
.file:hover { border-color: var(--brand-line); color: var(--ink); }
.drop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px dashed var(--ink-3);
  border-radius: 9px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}
.drop:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }

/* Moins large : le descriptif passe au-dessus, ses trois parties côte à côte. */
@container (max-width: 1080px) {
  .wk__body { grid-template-columns: minmax(0, 1fr) 300px; }
  .wk__desc { grid-column: 1 / -1; height: auto; min-height: 0; overflow: visible; padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .wk__dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .wk__hist { grid-column: 1 / -1; }
}
@container (max-width: 860px) {
  .wk__body { grid-template-columns: minmax(0, 1fr); }
  .wk__dgrid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .wk__court { max-height: none; overflow: visible; }
  .wk__actions .btn span, .ver__name { display: none; }
}

/* ---------- le chat avec Claude (à la place du menu de gauche) ---------- */

.app.is-chat { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); }
.chat {
  height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.chat.is-drop { outline: 2px dashed var(--brand); outline-offset: -6px; }
.chat__head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.chat__avatar, .msg__avatar {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #2B87FF, #8676FF);
  color: #FFFFFF;
}
.chat__who { flex: 1; min-width: 0; }
.chat__title { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 750; }
.chat__slide { margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 12.5px; }
.chat__setup { margin: 12px 14px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); font-size: 13px; color: var(--ink-2); }
.chat__setup p { margin: 0 0 8px; }
.chat__setup ol { margin: 0 0 10px; padding-left: 1.2em; }
.chat__setup li + li { margin-top: 6px; }
.chat__setup pre { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; word-break: break-all; user-select: all; }
.chat__setup code { font-family: var(--font-mono); font-size: 12px; }
.chat__setup-title { display: flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 700; }
.chat__setup-err { color: var(--danger); font-size: 12px; }
.chat__list { flex: 1; min-height: 0; overflow: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 14px; }
.chat__empty { margin: auto 8px; text-align: center; color: var(--ink-3); font-size: 13.5px; line-height: 1.55; }
.chat__empty .ic { margin: 0 auto 8px; color: var(--brand); }
.msg-live { display: contents; }
.msg { display: flex; gap: 9px; max-width: 100%; }
.msg--me { flex-direction: column; align-items: flex-end; }
.msg__bubble {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 14px 14px 4px 14px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.msg__files { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.msg__files .file { background: rgba(255, 255, 255, .92); color: #1E293B; border-color: transparent; }
.msg__flag { margin: 6px 0 0; font-size: 11.5px; font-weight: 700; opacity: .85; }
.msg__meta { margin: 4px 2px 0; color: var(--ink-3); font-size: 11.5px; }
.msg--claude .msg__body { flex: 1; min-width: 0; }
.msg__text { font-size: 14px; line-height: 1.55; color: var(--ink); }
.msg__text > .tx-seg > :first-child { margin-top: 0; }
.msg--claude.is-error .msg__text { color: var(--danger); }
.msg__tools { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.msg__tools li { padding: 2px 8px; border-radius: 999px; background: var(--line-2); color: var(--ink-3); font-size: 11.5px; font-family: var(--font-mono); }
.msg__tools li.is-edit { background: var(--ok-soft); color: var(--ok); }
.msg__working { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); animation: dots 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.chat__form { padding: 10px 12px 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.chat__form.is-disabled { opacity: .5; pointer-events: none; }
.chat__files { display: flex; flex-wrap: wrap; gap: 5px; }
.chat__files .file { padding-right: 4px; }
.file__name { padding: 0; border: 0; background: none; color: inherit; font: inherit; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.file__x { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--ink-3); }
.file__x:hover { background: var(--hover); color: var(--danger); }
.chat__input {
  width: 100%;
  min-height: 70px;
  max-height: 40vh;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
}
.chat__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.chat__bar { display: flex; align-items: center; gap: 8px; }
.chat__bar label.ib { cursor: pointer; }
.chat__opt { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.chat__opt .check { width: 16px; height: 16px; }
.chat__step { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 11.5px; text-align: right; }
/* le quota Claude du mois : ce qui reste (orange quand il reste peu, rouge à zéro) */
.chat__quota { flex: none; padding: 2px 7px; border-radius: 999px; background: var(--panel-2); color: var(--ink-3); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chat__quota[hidden] { display: none; }
.chat__quota.is-low { background: #FFF2DC; color: #8A5300; }
.chat__quota.is-out { background: var(--danger-soft); color: var(--danger); }
.wk__chat { color: var(--brand-ink); }
.wk__chat:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-ink); }
button.file { font: inherit; font-size: 12.5px; cursor: pointer; }

/* ---------- aperçu d'une source ---------- */

.preview {
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.preview[open] { display: flex; flex-direction: column; }
.preview::backdrop { background: rgba(14, 20, 31, .55); }
.preview__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.preview__ic { color: var(--ink-3); }
.preview__who { flex: 1; min-width: 0; }
.preview__name { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.preview__path { margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 12px; font-family: var(--font-mono); }
.preview__body { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 16px; background: var(--panel-2); }
.preview__body img { max-width: 100%; max-height: calc(100vh - 160px); border-radius: 8px; background: #FFFFFF; box-shadow: var(--shadow-1); }
.preview__body iframe { width: 100%; height: calc(100vh - 170px); border: 0; border-radius: 8px; background: #FFFFFF; }
.preview__body video { max-width: 100%; max-height: calc(100vh - 170px); }
.preview__text {
  justify-self: stretch;
  align-self: start;
  margin: 0;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.preview__none { color: var(--ink-3); }

/* ---------- présenter ---------- */

.present { position: fixed; inset: 0; z-index: 50; background: #0B1019; }
.present iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- dialogue ---------- */

.modal {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
}
.modal::backdrop { background: rgba(14, 20, 31, .45); }
.modal__box { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.modal__title { margin: 0; font-family: var(--font-display); font-size: 19px; letter-spacing: -0.01em; }
.modal__text { margin: 0; color: var(--ink-2); line-height: 1.55; }
.modal__text code { padding: 1px 5px; border-radius: 5px; background: var(--panel-2); }
.field { display: flex; flex-direction: column; gap: 6px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ---------- annonces ---------- */

.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100vw - 36px); }
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 440px;
  padding: 10px 8px 10px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3);
  border-radius: 11px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  font-size: 13.5px;
  animation: toast-in .25s cubic-bezier(.2, .7, .2, 1);
  transition: opacity .25s, transform .25s;
}
.toast > span { flex: 1; padding-top: 3px; }
.toast code { padding: 0 4px; border-radius: 4px; background: var(--panel-2); }
.toast--ok { border-left-color: var(--ok); }
.toast--error { border-left-color: var(--danger); }
.toast--live { border-left-color: var(--brand); }
.toast__files { display: block; margin-top: 2px; color: var(--ink-3); font-family: var(--font-mono); font-size: 11.5px; }
.toast.is-out { opacity: 0; transform: translateY(6px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- écrans étroits (le panneau d'aperçu de Claude Code, une tablette) ---------- */

.side-veil { display: none; }
@media (max-width: 920px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(320px, 88vw);
    transform: translateX(-102%);
    transition: transform .25s cubic-bezier(.2, .7, .2, 1);
    box-shadow: var(--shadow-pop);
  }
  .side-open .side { transform: none; }
  .side-open .side-veil, .chat-open .side-veil { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(14, 20, 31, .4); }
  .app.is-chat { grid-template-columns: minmax(0, 1fr); }
  .chat { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(420px, 94vw); box-shadow: var(--shadow-pop); }
  .side__close, .bar__menu { display: inline-grid; }
  .side__close .side__x { display: inline-grid; }
  .side__close .side__fold { display: none; }
  .bar { gap: 8px; padding: 8px 12px; }
  .view--atelier { padding: 14px 12px 50vh; }
  .wkl { gap: 14px; }
}
@media (max-width: 700px) {
  .seg button span, #btn-present span { display: none; }
  .seg button { padding: 0 9px; }
  #btn-present { width: 36px; padding: 0; }
  .bar__title h1 { font-size: 16px; }
}
@media (max-width: 480px) {
  .bar { flex-wrap: wrap; }
  .bar__title { order: 0; flex-basis: calc(100% - 50px); }
  .seg { order: 2; }
  .bar__actions { order: 3; margin-left: auto; }
}

/* Le modèle du chat, à côté de « Claude ». */
.chat__model { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-family: var(--font); font-size: 11px; font-weight: 700; vertical-align: 2px; }
.chat__model:empty { display: none; }

/* ---------- mode chat : le slide discuté seul, en grand ---------- */

.view--atelier.is-focus { padding-bottom: 22px; }
.wkl.is-focus { max-width: 1400px; }
.wkl.is-focus .wk:not(.is-focus) { display: none; }
.wkl.is-focus .wk.is-focus { display: block !important; } /* même masqué dans le scénario */
.wk__panels { display: none; gap: 4px; margin-right: 4px; }
.wk.is-focus .wk__panels { display: inline-flex; }
.tgl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
}
.tgl:hover { background: var(--hover); color: var(--ink); }
.tgl[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }
.tgl[hidden] { display: none; }
/* Les interactions (atelier) : emojis et commentaires, pour le slide (en-tête) et pour l'étape
   affichée (à droite de la barre des étapes) ; fermés : en pointillés */
.wk__ixs { display: inline-flex; gap: 4px; }
.wk__ixstep { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.wk__ixstep[hidden] { display: none; }
.wk__ixstep-k { color: var(--ink-3); font-size: 12px; font-weight: 650; white-space: nowrap; }
.wk__ixsb { height: 28px; font-size: 12px; }
.wk__ix[aria-pressed="false"], .wk__ixsb[aria-pressed="false"] { border-style: dashed; color: var(--ink-3); }
.wk__ix[aria-pressed="false"] .ic, .wk__ixsb[aria-pressed="false"] .ic { opacity: .5; }
.wk.is-focus .wk__body { grid-template-columns: minmax(0, 1fr); }
.wk.is-focus[data-desc="on"] .wk__body { grid-template-columns: 250px minmax(0, 1fr); }
.wk.is-focus[data-court="on"] .wk__body { grid-template-columns: minmax(0, 1fr) 300px; }
.wk.is-focus[data-desc="on"][data-court="on"] .wk__body { grid-template-columns: 240px minmax(0, 1fr) 280px; }
.wk.is-focus[data-desc="off"] .wk__desc, .wk.is-focus[data-court="off"] .wk__court { display: none; }
/* Le slide prend toute la place, sans dépasser la hauteur de l'écran. */
.wk.is-focus .wk__stage { width: 100%; max-width: calc((100vh - 290px) * 16 / 9); justify-self: center; }
@container (max-width: 1080px) {
  .wk.is-focus[data-desc="on"] .wk__body, .wk.is-focus[data-desc="on"][data-court="on"] .wk__body { grid-template-columns: minmax(0, 1fr); }
  .wk.is-focus[data-court="on"] .wk__body { grid-template-columns: minmax(0, 1fr) 280px; }
  .wk.is-focus[data-desc="on"][data-court="on"] .wk__body { grid-template-columns: minmax(0, 1fr) 280px; }
  .tgl span { display: inline; }
}
@container (max-width: 760px) {
  .tgl span { display: none; }
  .wk__ixstep .tgl span { display: inline; } /* « Étape 2 : Emojis, Commentaires » : le texte dit tout */
}

/* Le chat du master entier : l'icône de la barre du haut. */
.bar__chat { width: 38px; height: 38px; border-radius: 11px; color: var(--brand-ink); background: var(--brand-soft); }
.bar__chat:hover:not(:disabled) { background: var(--brand); color: var(--on-brand); }
.is-chat-master .bar__chat { background: var(--brand); color: var(--on-brand); }
.chat.is-master .chat__avatar { background: linear-gradient(135deg, #8676FF, #2B87FF); }
.chat__example { margin-top: 10px; font-style: italic; color: var(--ink-2); }

/* ---------- pointer un élément du slide (le chat) ---------- */

.chat__pick[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
/* La dictée : le micro pulse, le champ se teinte, le texte s'écrit au fil de la parole */
.chat__mic[aria-pressed="true"] { background: var(--danger); color: #FFFFFF; animation: chat-mic 1.4s ease-in-out infinite; }
@keyframes chat-mic { 0%, 100% { box-shadow: 0 0 0 0 rgba(194, 58, 54, .45); } 50% { box-shadow: 0 0 0 6px rgba(194, 58, 54, 0); } }
.chat.is-listening .chat__input { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.chat.is-listening .chat__step { color: var(--danger); font-weight: 650; }
.toast kbd { padding: 0 4px; border: 1px solid currentColor; border-radius: 4px; font: inherit; font-size: .9em; }
.chat.is-picking .chat__step { color: var(--brand-ink); font-weight: 650; }
.wk.is-picking .wk__stage .vis { outline: 3px solid var(--brand); outline-offset: 3px; }
.file.ref { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); }
.msg__files .file.ref { background: rgba(255, 255, 255, .92); color: #1867BE; }
.ref__wait { color: var(--ink-3); font-size: 11px; }
.r .is-picking .vis { outline: 3px solid var(--brand); outline-offset: 3px; }

/* Pointer un texte autour des slides (toutes les vues) */
html.is-picking-page #view [data-f="court"], html.is-picking-page #view [data-f="long"],
html.is-picking-page #view [data-f="desc"], html.is-picking-page #view [data-f="titre"],
html.is-picking-page #view [data-f] * { cursor: crosshair !important; }
.pick-box {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  border: 2px solid #2B87FF;
  border-radius: 6px;
  background: rgba(43, 135, 255, .1);
  transition: left .06s, top .06s, width .06s, height .06s;
}
.pick-box[hidden] { display: none; }
.pick-box__tag {
  position: absolute;
  left: -2px;
  top: -22px;
  padding: 0 6px;
  border-radius: 4px;
  background: #2B87FF;
  color: #FFFFFF;
  font: 600 11px/20px ui-monospace, 'SF Mono', Menlo, monospace;
  white-space: nowrap;
}
.pick-box.is-low .pick-box__tag { top: auto; bottom: -22px; }
html.is-picking-page .vis--thumb iframe { pointer-events: auto; }

/* La case à cocher d'une fenêtre (Nouveau slide : « Composant ») */
.field--check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); cursor: pointer; }
.field--check input { flex: none; margin-top: 2px; }
.field--check strong { display: block; font-size: 13.5px; }
.field--check small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }