/* ════════════════════════════════════════════════════════════════════════════
   Spotlite Pitch — éditeur. Sombre, sobre, trois colonnes.
   Le canvas est la vedette : tout le chrome reste discret autour.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0b0b0f;
  --panel: #131319;
  --panel-2: #1a1a22;
  --line: #26262f;
  --ink: #f2f2f5;
  --ink-dim: #9a9aa8;
  --accent: #fe2c55;
  --accent-soft: rgba(254, 44, 85, 0.14);
  --radius: 12px;
  --top-h: 58px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* ── Boutons / champs ─────────────────────────────────────────────────────── */
.btn {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  border-radius: 9px;
  padding: .5rem .85rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:hover:not(:disabled) { background: #23232c; border-color: #35353f; }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #ff4468; border-color: #ff4468; }
.btn-ghost { background: transparent; }
.btn-sm { padding: .34rem .6rem; font-size: 13px; border-radius: 8px; }
.btn-icon { padding: .45rem; line-height: 0; }
.btn-file { display: inline-flex; align-items: center; }

.field {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 9px;
  padding: .5rem .65rem;
  font: inherit;
  margin-bottom: .5rem;
}
.field:focus { outline: none; border-color: #46465a; }
.field-sm { padding: .34rem .5rem; font-size: 13px; margin-bottom: 0; }
textarea.field { resize: vertical; }
.field-lbl { display: block; font-size: 12px; color: var(--ink-dim); margin: .3rem 0 .25rem; }

.range { width: 100%; accent-color: var(--accent); }

.hint { font-size: 12px; color: var(--ink-dim); margin: .35rem 0 0; }

/* ── Sans compte ──────────────────────────────────────────────────────────── */
.guest-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-dim);
  margin: .55rem 0 0;
}
.linklike {
  border: 0; background: none; padding: 0;
  color: var(--accent); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: underline;
}

/* ── Barre haute ──────────────────────────────────────────────────────────── */
.top {
  height: var(--top-h);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 .9rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
/* Le point Spotlite, puis le nom du produit en rouge. On ouvre « Pitch » : le
   logo dit d'où ça vient, le mot dit ce que c'est. Deux fois moins large que
   « Spotlite Pitch », ce qui change tout sur un téléphone. */
.brand {
  display: flex; align-items: center; gap: .4rem;
  font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
  flex: none;
}
.brand-mark { flex: none; color: var(--ink); }
.brand b { color: var(--accent); font-weight: 800; }
.deck-title {
  flex: 1;
  min-width: 0;
  max-width: 380px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  border-radius: 8px;
  padding: .4rem .55rem;
  font: inherit;
  font-weight: 600;
}
.deck-title:hover { border-color: var(--line); }
.deck-title:focus { outline: none; background: var(--panel-2); border-color: #46465a; }
.save-state { font-size: 12px; color: var(--ink-dim); min-width: 6.5rem; }
.top-actions { margin-left: auto; display: flex; gap: .45rem; align-items: center; }

/* ── Grille principale ────────────────────────────────────────────────────── */
/* #app porte la hauteur : sans ça le `height` de .layout se résout contre un
   parent en hauteur auto, la ligne de grille prend la taille INTRINSÈQUE du
   canvas (1080×1920 pour un format TikTok) et la scène déborde de l'écran. */
#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 292px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Rail gauche ──────────────────────────────────────────────────────────── */
.rail {
  border-right: 1px solid var(--line);
  background: var(--panel);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.rail-block { padding: .85rem; border-bottom: 1px solid var(--line); }
.rail-slides { flex: 1; border-bottom: none; }
.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .6rem;
}
.rail-head h2 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-dim); margin: 0; font-weight: 700;
}

.deck-list { list-style: none; margin: 0; padding: 0; }
.deck-list li {
  display: flex; align-items: center; gap: .4rem;
  padding: .42rem .55rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
}
.deck-list li:hover { background: var(--panel-2); }
.deck-list li.active { background: var(--accent-soft); color: #ffd7df; }
.deck-list .d-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-list .d-del,
.deck-list .d-dup {
  border: 0; background: none; color: var(--ink-dim); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 .2rem; opacity: 0;
}
.deck-list li:hover .d-del,
.deck-list li:hover .d-dup { opacity: 1; }
.deck-list .d-del:hover,
.deck-list .d-dup:hover { color: var(--accent); }
.empty { font-size: 12.5px; color: var(--ink-dim); padding: .3rem .1rem; }

.slide-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.slide-strip li {
  position: relative;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  line-height: 0;
}
.slide-strip li.active { border-color: var(--accent); }
.slide-strip canvas { width: 100%; height: auto; display: block; }
.slide-strip .s-num {
  position: absolute; top: 4px; left: 5px;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  background: rgba(0,0,0,.62); color: #fff;
  padding: 3px 5px; border-radius: 5px;
}
.slide-strip .s-acts {
  position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; opacity: 0;
}
.slide-strip li:hover .s-acts { opacity: 1; }
.slide-strip .s-acts button {
  border: 0; border-radius: 5px; cursor: pointer; line-height: 1;
  background: rgba(0,0,0,.68); color: #fff;
  font-size: 11px; padding: 3px 5px;
}
.slide-strip .s-acts button:hover { background: var(--accent); }

/* ── Scène : les slides CÔTE À CÔTE ───────────────────────────────────────── */
/* Elles s'enchaînent horizontalement et repassent à la ligne quand la largeur
   manque : en zoomant, le pitch s'étale donc vers le BAS. `--slide-w` est piloté
   par le zoom ; le canvas garde son ratio via `aspect-ratio` posé en ligne. */
.stage-wrap {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: radial-gradient(1200px 600px at 50% -10%, #16161d 0%, var(--bg) 70%);
}
.stage-flow {
  --slide-w: 300px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1.15rem;
  /* Réserve du bas : la barre de zoom (3.4rem) OU la barre de conversation
     quand elle est ouverte, si elle monte plus haut. Elle FLOTTE au-dessus de
     la scène (`position: fixed`) : sans cette réserve, la dernière rangée de
     slides passe dessous et le défilement s'arrête avant de la dégager — on ne
     peut plus jamais voir le bas de la dernière slide. `--cbar-h` est mesurée
     en JS (voir `syncChatInset`), car sa hauteur change : phrases proposées,
     fil de conversation ouvert, tiroir des réglages… */
  padding: 1.15rem 1.15rem max(3.4rem, calc(var(--cbar-h, 0px) + 1.15rem));
}
.stage-slide {
  width: var(--slide-w);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}
.stage-canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
  background: #0e0e13;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 4px;
  transition: outline-color .15s;
}
.stage-slide.active .stage-canvas { outline-color: var(--accent); }
.stage-meta { flex: none; font-size: 11.5px; color: var(--ink-dim); margin: 0; }

/* ── Glisser-déposer ──────────────────────────────────────────────────────── */
.dragging { opacity: .4; }
.stage-slide.dragover .stage-canvas,
.slide-strip li.dragover { outline: 2px dashed var(--accent); outline-offset: 3px; }
.stage-slide, .slide-strip li { cursor: grab; }
.stage-slide:active, .slide-strip li:active { cursor: grabbing; }

/* ── Barre de zoom (flottante en bas à gauche de la scène) ────────────────── */
.zoom-bar {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .28rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  z-index: 5;
}
.zoom-btn {
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  border-radius: 999px;
  width: 28px; height: 28px;
  line-height: 1;
}
.zoom-btn:hover:not(:disabled) { background: var(--panel-2); }
.zoom-btn:disabled { opacity: .35; cursor: not-allowed; }
.zoom-fit { width: auto; padding: 0 .6rem; font-size: 12.5px; font-weight: 600; }
.zoom-val {
  min-width: 3.4rem;
  text-align: center;
  font-size: 12px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

/* ── Panneau des modèles ──────────────────────────────────────────────────── */
.tpl-panel { position: fixed; inset: 0; z-index: 50; }
.tpl-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.tpl-card {
  position: absolute;
  inset: 3vh 50% auto 50%;
  transform: translateX(-50%);
  width: min(1080px, 94vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.tpl-head { position: relative; padding: 1.1rem 1.2rem .8rem; border-bottom: 1px solid var(--line); }
.tpl-head h2 { margin: 0 0 .3rem; font-size: 1.1rem; }
.tpl-head p { margin: 0; font-size: 12.5px; color: var(--ink-dim); max-width: 62ch; }
.tpl-x { position: absolute; top: .8rem; right: .8rem; font-size: 20px; }

.tpl-cats {
  display: flex; flex-wrap: wrap; gap: .35rem;
  padding: .7rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.tpl-cat {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink-dim);
  border-radius: 999px;
  padding: .3rem .7rem;
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.tpl-cat.active { background: var(--accent-soft); border-color: var(--accent); color: #ffd7df; }

.tpl-list { overflow-y: auto; padding: .3rem 1.2rem 1.2rem; }
.tpl-item { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.tpl-item:last-child { border-bottom: none; }
.tpl-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
.tpl-item-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.tpl-item-head h3 span { color: var(--ink-dim); font-weight: 500; font-size: 12px; margin-left: .4rem; }

.tpl-strip { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.tpl-thumb {
  flex: none;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
}
.tpl-thumb:hover { border-color: var(--accent); }
.tpl-thumb canvas { width: 84px; height: auto; display: block; border-radius: 6px; }

/* ── Menu du compte ───────────────────────────────────────────────────────── */
.account-menu {
  position: fixed; top: 52px; right: 12px;
  display: flex; flex-direction: column; gap: .35rem;
  padding: .6rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  z-index: 70;
  min-width: 210px;
}
.account-menu .btn { text-align: center; text-decoration: none; }
.account-mail {
  margin: 0 0 .2rem; padding: 0 .2rem;
  font-size: 12px; color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Onglets du rail ──────────────────────────────────────────────────────── */
.rail-tabs { display: flex; border-bottom: 1px solid var(--line); flex: none; }
.rail-tab {
  flex: 1;
  border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--ink-dim);
  padding: .6rem .4rem;
  font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
}
.rail-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.rail-tab span { color: var(--ink-dim); font-weight: 500; }
.rail-decks { flex: 1; overflow-y: auto; }
[data-rail-panel] { border-bottom: none; }

/* ── Sélecteur d'emoji ────────────────────────────────────────────────────── */
.emoji-field { position: relative; }
.emoji-field .field { padding-right: 1.9rem; }
.emoji-btn {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--ink-dim);
  font-size: 15px; line-height: 1; cursor: pointer; padding: .2rem;
}
.emoji-btn:hover { color: var(--ink); }
.emoji-pop {
  position: fixed;
  width: 252px;
  max-height: 290px;
  display: flex; flex-direction: column; gap: .4rem;
  padding: .5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  z-index: 70;
}
.emoji-grid {
  overflow-y: auto;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.emoji-cell {
  border: 0; background: none; cursor: pointer;
  font-size: 19px; line-height: 1;
  padding: .25rem 0; border-radius: 6px;
}
.emoji-cell:hover { background: var(--panel-2); }

/* ── Couleurs ─────────────────────────────────────────────────────────────── */
.colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: .55rem; }
.color { display: flex; flex-direction: column; align-items: center; gap: .25rem; cursor: pointer; }
.color input[type="color"] {
  width: 100%; height: 30px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: none; cursor: pointer;
}
.color input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.color input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
.color span { font-size: 10.5px; color: var(--ink-dim); }

.swatches {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem;
  margin: .35rem 0 .6rem;
}
/* Le gros nuancier : plus de colonnes, pastilles plus petites. */
.swatches-flat { grid-template-columns: repeat(8, 1fr); gap: 4px; }
.swatches-flat .swatch { border-radius: 4px; }
.swatches-flat .swatch i { display: none; }
/* Les dégradés défilent : la roue complète tiendrait sur cinq rangées. */
.swatches-scroll {
  grid-template-columns: repeat(6, 1fr);
  max-height: 170px; overflow-y: auto;
  padding-right: 2px;
}
.swatch {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  padding: 0;
}
.swatch:hover { border-color: var(--accent); }
.swatch i {
  position: absolute; right: 3px; bottom: 3px;
  width: 7px; height: 7px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}

/* ── Assistant IA ─────────────────────────────────────────────────────────── */
.ai-card { width: min(720px, 94vw); }
/* ⚠️ UN SEUL défilement pour tout le panneau. Il y a trois `.ai-body` (créer /
   retoucher / options) et plusieurs peuvent être visibles ensemble : leur
   donner chacun `overflow-y: auto` produisait DEUX barres de défilement côte à
   côte, dont une qui ne bougeait pas quand on attendait l'autre. C'est la carte
   qui défile ; l'en-tête et les onglets restent épinglés en haut. */
.ai-card { overflow-y: auto; }
.ai-card .tpl-head,
.ai-card .tpl-cats { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.ai-body { overflow: visible; padding: 1rem 1.2rem; }

/* ── Panneau « Partager » ───────────────────────────────────────────────────
   ⚠️ IL DOIT DÉFILER LUI-MÊME. `.tpl-card` est plafonné (94 vh, 92 vh sur
   mobile) avec `overflow: hidden`, et son corps `.ai-body` est en
   `overflow: visible` : le défilement était assuré par `.ai-card`, une classe
   qui a disparu du HTML en même temps que le grand panneau de l'assistant. Le
   partage s'est donc retrouvé SANS propriétaire du défilement — tout ce qui
   passe sous le pli (« Travailler à plusieurs », le bloc série) était invisible
   ET inatteignable, à la souris comme au doigt. Ne pas retirer sans redonner le
   défilement à quelqu'un d'autre. */
.share-card { overflow-y: auto; }
.share-card .tpl-head { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.ai-h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-dim); margin: 1rem 0 .5rem; font-weight: 700;
}
.ai-images { margin-top: 1rem; }
.ai-images .rail-head { margin-bottom: .5rem; }
.ai-images h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-dim); margin: 0; font-weight: 700;
}
.ai-images h3 span { color: var(--accent); }
.ai-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.2rem;
  border-top: 1px solid var(--line);
}
.ai-foot .hint { margin: 0; }
.ai-tier { padding: .4rem .8rem; }

/* ── Capture d'écran (maquette) ───────────────────────────────────────────── */
.shot-row { display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem; }
.shot-preview {
  width: 34px; height: 52px; flex: none;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2) center/cover no-repeat;
}
/* Puces (types d'appareil) : elles se replient, la liste peut s'allonger. */
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .55rem; }
.chip {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink-dim);
  border-radius: 999px;
  padding: .3rem .6rem;
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: #ffd7df; }

/* Bandeau du tirage au sort, dans le panneau des modèles. */
.tpl-dice {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .6rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.tpl-dice .hint { margin: 0; }

/* ── Inspecteur ───────────────────────────────────────────────────────────── */
.inspector {
  border-left: 1px solid var(--line);
  background: var(--panel);
  overflow-y: auto;
  padding: .85rem;
}
.ins-group { padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line); }
.ins-group:last-child { border-bottom: none; margin-bottom: 0; }
.ins-group h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-dim); margin: 0 0 .55rem; font-weight: 700;
}

.seg { display: flex; gap: .35rem; margin-bottom: .6rem; }
.seg-btn {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink-dim);
  border-radius: 8px;
  padding: .42rem;
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.seg-btn.active { background: var(--accent-soft); border-color: var(--accent); color: #ffd7df; }

.row-check {
  display: flex; align-items: center; gap: .45rem;
  font-size: 13.5px; margin-bottom: .5rem; cursor: pointer;
}
.row-check input { accent-color: var(--accent); }

.two { display: grid; grid-template-columns: 5.2rem 1fr; gap: .5rem; }
.two .field { margin-bottom: 0; }
.two-font { display: grid; grid-template-columns: 1fr auto; gap: .4rem; align-items: start; margin-bottom: .5rem; }
.two-font .field { margin-bottom: 0; }

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: .35rem;
  margin-bottom: .55rem;
}
.thumb {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 2px solid var(--line);
  background: var(--panel-2) center/cover no-repeat;
  cursor: pointer;
  padding: 0;
  font-size: 10.5px;
  color: var(--ink-dim);
}
.thumb.active { border-color: var(--accent); }
.thumb.loading { opacity: .45; }

.tools { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tools .field-sm { flex: 1; min-width: 84px; }

.brand-row { display: flex; align-items: center; gap: .45rem; margin-bottom: .55rem; }
.brand-logo {
  width: 40px; height: 40px; flex: none;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-2) center/contain no-repeat;
}

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%; bottom: 1.4rem;
  transform: translate(-50%, 1.6rem);
  background: #23232c;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: .6rem 1rem;
  border-radius: 10px;
  font-size: 13.5px;
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 60;
  max-width: min(92vw, 460px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.warn { border-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE

   Deux paliers, deux intentions différentes :
     • ≤ 1180 px (tablette / petit portable) — on garde les trois colonnes, on
       les resserre. La disposition reste celle du bureau.
     • ≤ 860 px (téléphone) — DISPOSITION D'APPLICATION. Les trois colonnes ne
       tiennent pas et les empiler donne une page interminable : on met la
       slide plein écran, et les panneaux remontent en feuilles, une à la fois,
       depuis une barre d'outils en bas. C'est le geste de Canva ou CapCut.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La barre d'outils n'existe qu'en mobile — cachée par défaut, donc invisible
   partout ailleurs sans avoir à l'annuler dans chaque règle. */
.mtabs, .sheet-backdrop { display: none; }

/* ── Tablette : on resserre, on ne réorganise pas ──────────────────────────── */
@media (max-width: 1180px) and (min-width: 861px) {
  .layout { grid-template-columns: 196px minmax(0, 1fr) 260px; }
  .deck-title { max-width: 220px; }
  .save-state { min-width: 0; }
  /* Les actions passent en rail défilant plutôt que de pousser le titre hors
     de l'écran. */
  .top-actions { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .top-actions::-webkit-scrollbar { display: none; }
  .top-actions > * { flex: none; }
}

/* ── Téléphone : disposition d'application ────────────────────────────────── */
@media (max-width: 860px) {
  /* Le corps ne défile jamais : c'est la scène ou la feuille qui défile. */
  #app { overflow: hidden; }

  .top {
    height: auto; padding: .45rem .6rem;
    gap: .4rem;
    padding-top: max(.45rem, env(safe-area-inset-top));
  }
  .brand { font-size: .95rem; gap: .3rem; }
  .brand-mark { width: 18px; height: 18px; }
  /* 16 px comme tous les champs : en dessous, toucher le titre fait zoomer la
     page entière sous iOS, et on ne revient jamais au cadrage d'avant. */
  .deck-title { max-width: none; font-size: 16px; padding: .35rem .45rem; }
  .save-state { min-width: 0; font-size: 11px; }
  /* UNE SEULE RANGÉE, sans défilement. La barre portait huit boutons dans un
     rail qui glissait sous le pouce : on ne savait ni ce qu'il y avait, ni où
     ça allait. Il n'en reste que quatre — annuler, rétablir, créer, menu — et
     ils tiennent à côté du titre. Tout le reste est DANS le menu ☰. */
  .top-actions {
    margin-left: auto; order: 0; width: auto;
    gap: .25rem; padding: 0;
  }
  .top-actions > * { flex: none; }
  .top-actions .btn { padding: .42rem .55rem; font-size: 13px; }
  .top-actions .btn-icon { padding: .42rem .45rem; }

  /* La scène occupe tout ce qui reste, barre d'outils comprise. */
  .layout { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
  .stage-wrap { grid-area: 1 / 1; }
  .stage { padding-bottom: 0; }
  /* Peu de slides = beaucoup de vide : on centre verticalement. `safe` évite
     de rogner le haut quand le pitch devient plus long que l'écran. */
  .stage-flow {
    padding: .8rem .8rem max(4.6rem, calc(var(--cbar-h, 0px) + .8rem));
    gap: .8rem;
    min-height: 100%; align-content: safe center;
  }
  .zoom-bar { bottom: calc(3.9rem + env(safe-area-inset-bottom)); }

  /* ── Les panneaux deviennent des feuilles ──────────────────────────────── */
  .rail, .inspector {
    position: fixed; left: 0; right: 0;
    bottom: calc(3.5rem + env(safe-area-inset-bottom));
    z-index: 40;
    max-height: min(66vh, 520px);
    border: none; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -14px 40px rgba(0, 0, 0, .5);
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Fermée par défaut. `visibility` évite qu'une feuille invisible garde le
       focus ou intercepte un geste. */
    transform: translateY(102%);
    visibility: hidden;
    transition: transform .24s cubic-bezier(.22, .61, .36, 1), visibility .24s;
  }
  .rail { grid-area: unset; }
  .inspector { grid-area: unset; padding: .85rem .85rem 1.2rem; }
  /* Poignée : signale qu'on peut refermer, et sépare du contenu. */
  .rail::before, .inspector::before {
    content: ""; display: block;
    width: 36px; height: 4px; margin: .5rem auto .6rem;
    border-radius: 999px; background: var(--line);
    position: sticky; top: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .rail, .inspector { transition: none; }
  }
  body[data-sheet="slides"] .rail,
  body[data-sheet="texte"]  .inspector,
  body[data-sheet="design"] .inspector,
  body[data-sheet="image"]  .inspector,
  body[data-sheet="plus"]   .inspector { transform: translateY(0); visibility: visible; }

  /* Une feuille = un sujet. On ne montre que les groupes de l'onglet actif :
     dérouler les huit d'un coup, c'est ce qui rendait l'inspecteur pénible. */
  body[data-sheet="texte"]  .ins-group:not([data-ins="texte"]),
  body[data-sheet="image"]  .ins-group:not([data-ins="image"]),
  body[data-sheet="design"] .ins-group:not([data-ins="design"]),
  body[data-sheet="plus"]   .ins-group[data-ins="texte"],
  body[data-sheet="plus"]   .ins-group[data-ins="image"],
  body[data-sheet="plus"]   .ins-group[data-ins="design"] { display: none; }

  .sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(0, 0, 0, .45);
  }

  /* ── Barre d'outils du bas ─────────────────────────────────────────────── */
  .mtabs {
    display: flex; position: fixed; z-index: 45;
    left: 0; right: 0; bottom: 0;
    height: calc(3.5rem + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--panel);
    border-top: 1px solid var(--line);
  }
  .mtab {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    border: 0; background: none; color: var(--ink-dim);
    font: inherit; font-size: 10.5px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mtab i { font-style: normal; font-size: 1.05rem; line-height: 1; }
  .mtab.on { color: var(--accent); }

  /* Le rail garde ses deux onglets internes (Slides / Mes pitchs). */
  .rail-block { padding: .85rem; }
  .rail-slides { border-bottom: none; }
  .slide-strip { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }

  /* Les fenêtres modales (modèles, IA, partage) passent au-dessus des feuilles
     et laissent la place à la barre d'outils. */
  .tpl-panel { z-index: 60; }
  .tpl-card { max-height: calc(100vh - 4.5rem); }
}

/* Très étroit : les libellés de la barre d'outils gênent plus qu'ils n'aident. */
@media (max-width: 360px) {
  .mtab span { display: none; }
  .mtab i { font-size: 1.2rem; }
}

/* Séparateur dans le panneau de partage (lien direct / diffusion écosystème). */
.share-sep {
  height: 1px; margin: 1.1rem 0 .9rem;
  background: var(--line, #26262f);
}

/* État des parties d'une série dans le panneau de partage. Une ligne par
   partie : on doit voir d'un coup d'œil ce qui est en ligne et ce qui manque —
   c'est ce qui décide si le lien montrera des onglets ou une page seule. */
.ser-parts { list-style: none; margin: .45rem 0 .7rem; padding: 0; display: grid; gap: .3rem; }
.sp {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: 12.5px; line-height: 1.35; min-width: 0;
}
.sp.is-me { font-weight: 600; }
.sp-n {
  flex: none; font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--ink-dim); min-width: 2.1em;
}
.sp-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-on, .sp-off, .sp-empty {
  flex: none; font-size: 11px; font-weight: 600;
  padding: .1rem .45rem; border-radius: 999px;
}
.sp-on { background: rgba(52, 199, 89, .16); color: #34c759; }
.sp-off { background: rgba(255, 159, 10, .16); color: #ff9f0a; }
.sp-empty { background: rgba(255, 255, 255, .08); color: var(--ink-dim); }

/* ══════════════════════════════════════════════════════════════════════════
   SUIVI — séries, versions, tâches
   Le panneau doit rester lisible d'un coup d'œil : rien ne s'affiche tant
   qu'il n'y a rien à dire (pitch isolé, brouillon, sans tâche).
   ══════════════════════════════════════════════════════════════════════════ */
.rail-badge {
  display: inline-grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
}
.rail-track { overflow-y: auto; }
.track-sec { padding: .75rem .1rem; border-bottom: 1px solid var(--line); }
.track-sec:last-child { border-bottom: 0; }
.track-ver { font-size: .74rem; color: var(--ink-dim); }
.track-ver b { color: var(--ink); }

/* Statuts — mêmes teintes que les pastilles de l'ATS. */
.st-chip { border-color: var(--line); }
.st-chip.active { color: #fff; border-color: transparent; }
.st-draft.active    { background: #4a4a58; }
.st-ready.active    { background: #2f7d5b; }
.st-live.active     { background: #2563c9; }
.st-outdated.active { background: #b4462b; }
.st-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 5px; vertical-align: middle; background: #4a4a58;
}
.st-dot.st-ready { background: #35a375; }
.st-dot.st-live { background: #3b82f6; }
.st-dot.st-outdated { background: #e0603c; }

.track-verrow { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.track-vernum { font-size: 1.05rem; font-weight: 700; min-width: 1.4rem; text-align: center; }
.track-verrow .hint { flex: 1 1 100%; margin: .3rem 0 0; }
.track-partrow { display: flex; align-items: center; gap: .45rem; margin-top: .45rem; }
.track-partnum { width: 4.2rem; }

/* Les parties d'une série : l'ordre est l'information principale. */
.part-list { list-style: none; margin: .3rem 0 .55rem; padding: 0; display: grid; gap: 4px; }
.part {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .5rem; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; background: var(--panel-2);
}
.part:hover { border-color: var(--line); }
.part.current { border-color: var(--accent); cursor: default; }
.part-n {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  background: rgba(255,255,255,.07); color: var(--ink-dim);
  display: grid; place-items: center; font-size: .7rem; font-weight: 700;
}
.part.current .part-n { background: var(--accent); color: #fff; }
.part-t { min-width: 0; }
.part-t b { display: block; font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-meta { display: block; font-size: .7rem; color: var(--ink-dim); }

/* Tâches */
.task-bar { height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; margin: .1rem 0 .5rem; }
.task-bar-fill { height: 100%; width: 0; background: #35a375; transition: width .22s; }
.task-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: 2px; }
.task { display: flex; align-items: center; gap: .4rem; }
.task label { display: flex; align-items: flex-start; gap: .45rem; flex: 1; cursor: pointer; font-size: .82rem; padding: .2rem 0; }
.task input { margin-top: .18rem; accent-color: #35a375; flex: none; }
.task.done label span { text-decoration: line-through; color: var(--ink-dim); }
.t-del {
  flex: none; border: 0; background: none; color: var(--ink-dim);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .25rem; opacity: 0;
}
.task:hover .t-del, .t-del:focus-visible { opacity: 1; }
.task-add { display: flex; gap: .35rem; }
.task-add .field { flex: 1; min-width: 0; }

/* Chiffres saisis à la main, en face de chaque variante. `is-top` = celle qui
   mène sur le critère commun (voir bestVariantBy). */
.part-mx { display: block; font-size: .7rem; color: var(--ink-dim); margin-top: 2px; font-variant-numeric: tabular-nums; }
.part-mx.is-top { color: #35a375; font-weight: 650; }

/* Méta dans « Mes pitchs » */
.d-meta { display: block; font-size: .7rem; color: var(--ink-dim); margin-top: 1px; }
.d-part { color: var(--accent); font-weight: 700; }

/* Public / privé. Le titre peut être long : il se tronque, la pastille non —
   c'est elle qu'on vient lire d'un coup d'œil, elle ne doit jamais disparaître
   sous les points de suspension. */
.deck-list .d-title { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.deck-list .d-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-pub {
  flex: none; font-size: .62rem; font-weight: 700; letter-spacing: .01em;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.07); color: var(--ink-dim);
}
.d-pub.is-pub { background: rgba(53,163,117,.16); color: #35a375; }

/* « Mes chiffres » : deux colonnes de champs courts, libellé au-dessus. */
.mx-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .35rem; margin: .3rem 0; }
.mx-grid-2 { grid-template-columns: 1fr 1fr; }
.mx-f { display: block; min-width: 0; }
.mx-f > span { display: block; font-size: .66rem; color: var(--ink-dim); margin-bottom: 1px; }
.mx-f .field { width: 100%; font-variant-numeric: tabular-nums; }
.mx-f-wide { display: block; margin-top: .35rem; }

/* ══════════════════════════════════════════════════════════════════════════
   MISE EN FORME DU TEXTE + LISTES
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ CLASSE PROPRE, surtout pas `.swatches` : celle-ci est déjà définie plus
   haut en GRILLE pour les nuanciers du panneau Couleurs. La redéfinir ici en
   flex l'écrasait (ma règle vient après) et faisait s'effondrer « Nuances » et
   « Couleurs unies » en fines lamelles. */
.sw-row { display: flex; flex-wrap: wrap; gap: 6px; margin: .35rem 0 .2rem; }
.sw {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.sw.on { border-color: var(--accent); }

/* Pavé de déplacement : la croix directionnelle se lit sans étiquette. */
.nudge { display: grid; justify-items: center; gap: 3px; margin: .3rem 0 .2rem; }
.nudge-mid { display: flex; gap: 3px; }
.nudge .btn { min-width: 34px; }

/* Éditeur de liste */
.li-edit { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: 4px; }
.li-row { display: flex; align-items: center; gap: .35rem; }
.li-ic { flex: none; width: 18px; text-align: center; color: var(--ink-dim); font-size: .8rem; }
.li-done { flex: none; accent-color: #35a375; }
.li-text { flex: 1; min-width: 0; }
.li-up, .li-del {
  flex: none; border: 0; background: none; color: var(--ink-dim);
  cursor: pointer; font-size: .95rem; line-height: 1; padding: 0 .2rem;
}
.li-up:hover, .li-del:hover { color: var(--ink); }

/* ── Liens ───────────────────────────────────────────────────────────────────
   Le 🔗 se pose DANS le coin de la zone de saisie (pas au milieu comme
   l'emoji : une zone de plusieurs lignes n'a pas de milieu utile). */
/* Le bouton se pose DANS le coin de la zone de saisie et porte son mot :
   une fonction qu'on ne voit pas n'existe pas, et une icône seule ne dit pas
   ce qu'elle fait. */
.link-field { position: relative; }
.link-field .field { padding-right: 4.2rem; }
.link-btn {
  position: absolute; right: .35rem; top: .35rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink-dim);
  font-size: 11px; line-height: 1; cursor: pointer; padding: .22rem .45rem;
}
.link-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--accent); }

/* Cases du style « Tâches » : une par élément, sous le champ. C'est le seul
   réglage par élément qu'un champ texte ne sait pas porter. */
.task-dones { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin-top: .4rem; }
.tk-done {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: 11px; color: var(--ink-dim); cursor: pointer;
}
/* Sous-titre remplacé par une liste : poser un lien dedans n'affiche rien. Le
   bouton doit le montrer, sinon il reste engageant et sans effet. */
.link-btn:disabled { opacity: .42; cursor: not-allowed; }

/* L'invite qui apparaît quand une adresse est collée dans le texte. */
.hint-link { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.link-make {
  border: 1px solid var(--accent); border-radius: 999px;
  background: transparent; color: var(--accent);
  font-size: 11px; line-height: 1; cursor: pointer; padding: .22rem .5rem;
}
.link-make:hover { background: var(--accent); color: #fff; }

.link-row { display: flex; align-items: flex-start; gap: .35rem; }
.link-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.link-acts { flex: none; display: flex; align-items: center; gap: .1rem; padding-top: .15rem; }
.link-acts button {
  border: 0; background: none; color: var(--ink-dim);
  cursor: pointer; font-size: .95rem; line-height: 1; padding: 0 .2rem;
}
.link-acts button:hover { color: var(--ink); }
.link-add { display: grid; gap: 4px; margin-bottom: .55rem; }

/* Les liens posés dans un texte, listés sous le champ : ✎ pour modifier,
   ✕ pour retirer (le mot reste écrit). */
.link-chip {
  display: inline-flex; align-items: center; gap: .18rem;
  max-width: 100%; padding: .12rem .3rem .12rem .45rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2);
  font-size: 11px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-chip button {
  border: 0; background: none; color: var(--ink-dim);
  cursor: pointer; font-size: 11px; line-height: 1; padding: .1rem .15rem;
}
.link-chip button:hover { color: var(--accent); }
.link-chip-note { color: var(--ink-dim); font-size: 11px; }

.link-card { width: min(440px, 94vw); }
.link-dlg-sp { flex: 1; }
.link-dlg-rm { color: var(--accent); border-color: transparent; }
.link-dlg-body { padding: .9rem 1rem 1.1rem; }
.link-dlg-acts { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .7rem; }

/* Le texte se déplace au doigt : on le fait sentir. */
/* Par defaut le doigt DEFILE :  laisse passer le scroll vertical.
   Seule une slide ATTRAPEE (appui sur la slide courante) bloque le geste pour
   permettre de deplacer son texte. Sans ca, sur mobile ou la slide occupe tout
   l ecran, chaque tentative de defilement deplacait le texte. */
.stage figure[data-stage] { touch-action: pan-y; }
.stage figure[data-stage].picked { touch-action: none; }
.stage figure[data-stage].picked .stage-canvas {
  outline: 2px dashed var(--accent); outline-offset: 3px;
}

/* Vue « Tout » des tâches : regroupées par pitch. */
.st-seg { display: flex; gap: 2px; background: var(--panel-2); border-radius: 8px; padding: 2px; }
.st-seg button {
  border: 0; background: none; color: var(--ink-dim); cursor: pointer;
  font: inherit; font-size: .72rem; padding: .2rem .5rem; border-radius: 6px;
}
.st-seg button.active { background: var(--accent); color: #fff; }
.task-grp { margin-bottom: .5rem; }
.task-grp-h {
  display: flex; align-items: center; gap: .4rem; width: 100%;
  border: 0; background: none; color: var(--ink); cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600; text-align: left;
  padding: .25rem 0; opacity: .85;
}
.task-grp-h:hover { opacity: 1; }
.task-grp-n {
  margin-left: auto; font-size: .68rem; font-weight: 700; color: var(--ink-dim);
  background: var(--panel-2); border-radius: 999px; padding: 1px 6px;
}
.task-grp .task-list { margin: 0 0 0 .2rem; padding-left: .4rem; border-left: 1px solid var(--line); }

/* ══════════════════════════════════════════════════════════════════════════
   ESPACE TÂCHES — la liste déduite de l'activité
   ══════════════════════════════════════════════════════════════════════════ */
.tasks-body { padding: .9rem 1rem 1.1rem; overflow-y: auto; }
.tk-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: 5px; }
.tk {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .7rem; border-radius: 10px; cursor: pointer;
  background: var(--panel-2); border: 1px solid transparent;
  transition: border-color .15s, transform .12s;
}
.tk:hover { border-color: var(--line); transform: translateX(2px); }
.tk-ic {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; font-size: .9rem; font-weight: 700;
  background: rgba(255,255,255,.07); color: var(--ink-dim);
}
/* Chaque type sa couleur : l'urgence se lit sans lire le texte. */
.tk-part { background: rgba(254,44,85,.18); color: #ff6b8a; }
.tk-redo { background: rgba(224,96,60,.18); color: #ff9068; }
.tk-empty, .tk-blank { background: rgba(255,204,0,.15); color: #ffcc00; }
.tk-finish { background: rgba(59,130,246,.18); color: #7dabff; }
.tk-publish { background: rgba(53,163,117,.18); color: #5fd3a3; }
.tk-t { min-width: 0; flex: 1; }
.tk-t b { display: block; font-size: .87rem; font-weight: 600; }
.tk-t span { display: block; font-size: .74rem; color: var(--ink-dim); }
.tk-go {
  flex: none; font-size: .72rem; font-weight: 700; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: .22rem .6rem;
}
.tk:hover .tk-go { color: var(--ink); border-color: var(--ink-dim); }

/* Contexte permanent de l'auteur, dans le panneau IA. */
.ai-ctx { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.ai-ctx .st-seg { display: inline-flex; margin: .1rem 0 .5rem; }
.ai-ctx textarea { margin-bottom: .4rem; }
.ai-ctx .thumbs { margin-bottom: .4rem; }

/* ── Tableau de post-it (mêmes couleurs que l'ATS, notes.js) ───────────────── */
.nb {
  position: relative; width: 100%; height: 46vh; min-height: 260px;
  border: 1px dashed var(--line); border-radius: 12px;
  background: rgba(255,255,255,.02); overflow: hidden; margin-top: .5rem;
}
.nb-note {
  position: absolute; width: 21%; min-width: 122px; max-width: 190px;
  padding: .5rem .55rem .4rem; border-radius: 4px; cursor: grab;
  color: #17171d; box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transform: rotate(-1deg); touch-action: none;
}
.nb-note:nth-child(even) { transform: rotate(1.2deg); }
.nb-note.dragging { cursor: grabbing; box-shadow: 0 14px 30px rgba(0,0,0,.5); z-index: 3; }
.nb-note.done .nb-txt { text-decoration: line-through; opacity: .55; }
.nb-txt { margin: 0 0 .3rem; font-size: .78rem; line-height: 1.3; word-break: break-word; }
.nb-tools { display: flex; gap: .1rem; justify-content: flex-end; }
.nb-tools button {
  border: 0; background: rgba(0,0,0,.07); color: #17171d; cursor: pointer;
  border-radius: 5px; width: 20px; height: 18px; font-size: .7rem; line-height: 1; padding: 0;
}
.nb-tools button:hover { background: rgba(0,0,0,.16); }
.nb-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-dim); font-size: .84rem; margin: 0; padding: 1rem; text-align: center; }
.nc-yellow { background: linear-gradient(158deg, #fff8d4, #fdeeb0); }
.nc-green  { background: linear-gradient(158deg, #e2f7e8, #cbeed6); }
.nc-blue   { background: linear-gradient(158deg, #e6f1fd, #d3e6fb); }
.nc-pink   { background: linear-gradient(158deg, #ffe8f0, #ffd4e2); }
.nc-purple { background: linear-gradient(158deg, #efe9fd, #e0d6fa); }
.nc-orange { background: linear-gradient(158deg, #fff0d8, #ffe1b3); }
.nc-gray   { background: linear-gradient(158deg, #f4f6f9, #e7eaf0); }

/* ── Heat map d'activité ──────────────────────────────────────────────────── */
.hm-wrap { margin: .8rem 0 .2rem; }
.hm-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .74rem; color: var(--ink-dim); margin-bottom: .35rem; }
.hm-legend { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
/* Colonnes = semaines, lignes = jours : le flux vertical remplit une semaine
   avant de passer à la suivante. */
.hm {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr);
  gap: 3px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin;
}
.hm i, .hm-legend i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.hm-c0 { background: rgba(255,255,255,.07); }
.hm-c1 { background: rgba(254,44,85,.28); }
.hm-c2 { background: rgba(254,44,85,.5); }
.hm-c3 { background: rgba(254,44,85,.74); }
.hm-c4 { background: #fe2c55; }

/* Variantes : le trophée de la gagnante. */
.v-win { flex: none; border: 0; background: none; cursor: pointer; font-size: .82rem; opacity: .3; padding: 0 .2rem; }
.v-win:hover { opacity: .75; }
.v-win.on { opacity: 1; }

/* Mobile : le tableau et la grille doivent rester utilisables au doigt. */
@media (max-width: 860px) {
  .nb { height: 52vh; }
  .nb-note { width: 44%; min-width: 108px; }
  .hm i, .hm-legend i { width: 8px; height: 8px; }
}

/* ── Vue « Par série » du rail gauche ──────────────────────────────────────── */
.ser-grp { display: block; padding: 0 0 .5rem; cursor: default; }
.ser-grp:hover { background: none; }
.ser-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: .4rem;
  padding: .45rem .2rem .25rem; font-size: 12px;
}
.ser-h b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ser-h span { color: var(--ink-dim); font-size: 11px; white-space: nowrap; }
.ser-grp .deck-list { border-left: 1px solid var(--line); padding-left: .35rem; margin-left: .25rem; }

/* Étiquettes de mois de la heat map : alignées sur les mêmes colonnes que la
   grille, sinon un mois se retrouverait au-dessus de la mauvaise semaine. */
.hm-months {
  display: grid; grid-auto-flow: column; grid-auto-columns: 10px; gap: 3px;
  font-size: 9.5px; color: var(--ink-dim); margin-bottom: 2px; height: 12px;
  overflow: hidden; white-space: nowrap;
}
.hm-months span { grid-row: 1; }
@media (max-width: 860px) { .hm-months { grid-auto-columns: 8px; } }

/* ── Bouton d'action flottant (mobile) ─────────────────────────────────────── */
/* Caché par défaut, comme la barre d'outils mobile : le bureau ne change pas. */
.fab, .fab-menu { display: none; }

@media (max-width: 860px) {
  .fab {
    display: grid; place-items: center;
    position: fixed; z-index: 46;
    right: .9rem;
    /* Juste au-dessus de la barre d'outils, encoche comprise. */
    bottom: calc(4.2rem + env(safe-area-inset-bottom));
    width: 52px; height: 52px; border-radius: 50%;
    border: 0; background: var(--accent); color: #fff;
    font-size: 1.6rem; line-height: 1; cursor: pointer;
    box-shadow: 0 8px 22px rgba(254, 44, 85, .45);
    transition: transform .18s;
  }
  .fab[aria-expanded="true"] { transform: rotate(45deg); }
  .fab-menu {
    display: grid; gap: 6px; justify-items: stretch;
    position: fixed; z-index: 46;
    right: .9rem; bottom: calc(9rem + env(safe-area-inset-bottom));
    min-width: 190px;
    animation: fab-rise .16s ease;
  }
  @keyframes fab-rise { from { transform: translateY(8px); opacity: 0; } }
  .fab-item {
    display: flex; align-items: center; gap: .55rem;
    background: var(--panel-2); color: var(--ink);
    border: 1px solid var(--line); border-radius: 11px;
    padding: .62rem .8rem; font: inherit; font-size: .86rem; font-weight: 600;
    cursor: pointer; text-align: left;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  }
  .fab-item i { font-style: normal; opacity: .7; width: 1.1rem; text-align: center; }
  .fab-item:active { background: #23232c; }
  /* Le FAB s'efface quand une feuille est ouverte : elle occupe déjà l'écran.
     La feuille courante est marquée par `body[data-sheet]` (cf. openSheet). */
  body[data-sheet] .fab, body[data-sheet] .fab-menu { display: none; }
}

/* Série : l'appartenance est affichée, pas devinée. */
.ser-badge { display: flex; align-items: center; gap: .35rem; margin-bottom: .5rem; }
.ser-badge b {
  flex: 1; min-width: 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--accent-soft); color: #ffd7df;
  padding: .3rem .55rem; border-radius: 8px;
}
.ser-add {
  border: 0; background: none; color: var(--ink-dim); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 .25rem;
}
.ser-add:hover { color: var(--accent); }

/* ── Onglet Séries : une ligne par série ───────────────────────────────────── */
.ser-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .55rem; }
.ser-row {
  border: 1px solid var(--line); border-radius: 10px; padding: .5rem .55rem;
  background: var(--panel-2); cursor: pointer;
}
.ser-row.on { border-color: var(--accent); }
.ser-row-h { display: flex; align-items: center; gap: .4rem; }
.ser-row-h b { flex: 1; min-width: 0; font-size: 12.8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ser-row-h span { font-size: 11px; color: var(--ink-dim); }
.ser-plus {
  flex: none; border: 0; background: rgba(255,255,255,.07); color: var(--ink);
  border-radius: 6px; width: 22px; height: 22px; cursor: pointer; font-size: 13px; line-height: 1;
}
.ser-plus:hover { background: var(--accent); color: #fff; }
/* Renommer / supprimer la série, retirer une partie. Discrets au repos — ce
   sont des actions rares — mais TOUJOURS présents : les cacher au survol les
   rendrait introuvables au doigt, et c'est exactement ce qui manquait. */
.ser-act {
  flex: none; border: 0; background: none; color: var(--ink-dim);
  border-radius: 6px; width: 20px; height: 20px; cursor: pointer;
  font-size: 11.5px; line-height: 1; padding: 0;
}
.ser-act:hover { background: rgba(255,255,255,.09); color: var(--ink); }
/* Flèche en bout de série (ou entre variantes d'une même partie) : laissée en
   place plutôt que masquée, sinon la rangée de boutons se décale d'une ligne à
   l'autre et la cible bouge sous le doigt. */
.ser-act:disabled { opacity: .25; cursor: default; }
.ser-act:disabled:hover { background: none; color: var(--ink-dim); }
.ser-del:hover { background: var(--accent); color: #fff; }
.ser-bar { height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; margin: .35rem 0; }
.ser-bar i { display: block; height: 100%; background: var(--accent); }
.ser-parts { list-style: none; margin: 0; padding: 0 0 0 .2rem; display: grid; gap: 2px; }
/* Une partie = un rang cliquable (il ouvre le pitch) + son ⊘ qui, lui, ne
   l'ouvre pas. D'où la mise en ligne : le titre se tronque, le bouton jamais. */
.ser-parts li {
  display: flex; align-items: center; gap: .35rem;
  font-size: 12px; color: var(--ink-dim); padding: .15rem .25rem; border-radius: 5px;
  cursor: pointer;
}
.ser-part-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ser-parts li:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.ser-parts li.on { color: var(--ink); background: var(--accent-soft); }

/* ── Sélecteur universel ───────────────────────────────────────────────────── */
.pick-card { width: min(520px, 94vw); }
.pick-body { padding: .9rem 1rem 1.1rem; overflow-y: auto; }
.pick-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: 4px; }
.pick-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .65rem; border-radius: 9px; background: var(--panel-2);
}
.pick-t { flex: 1; min-width: 0; }
.pick-t b { display: block; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-t span { display: block; font-size: .74rem; color: var(--ink-dim); }
.pick-add {
  flex: none; border: 0; background: var(--accent); color: #fff;
  border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-size: 15px; line-height: 1;
}
/* La vignette d'une image reprise depuis un AUTRE pitch. Sans elle, la liste
   n'affiche que « Image 3 » — or c'est justement l'image qu'on cherche à
   reconnaître, pas son numéro. */
.pick-img {
  flex: none; width: 44px; height: 44px; border-radius: 7px;
  background: #0d0d12 center/cover no-repeat;
  border: 1px solid var(--line);
}

/* ── Plan de série ───────────────────────────────────────────────────────────
   Le panneau qui montre le découpage AVANT de créer et d'écrire. Il doit se
   lire en trois secondes : une ligne par partie, la case qui décide du coût, le
   bouton qui dit exactement ce qu'il fait.
   Préfixe `splan-` et non `sp-` : `.sp` habille déjà les lignes de parties du
   panneau « Partager ». */
#series-plan .tpl-card { width: min(560px, 94vw); }
.splan-body { padding: .9rem 1rem 1.1rem; overflow-y: auto; }
.splan-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: 5px; }
.splan-part {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .55rem .65rem; border-radius: 9px; background: var(--panel-2);
}
.splan-num {
  flex: none; font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: .78rem; color: var(--accent); min-width: 2.1em; padding-top: .1rem;
}
.splan-txt { flex: 1; min-width: 0; }
.splan-txt b { display: block; font-size: .86rem; line-height: 1.3; }
.splan-txt span { display: block; margin-top: .15rem; font-size: .74rem; line-height: 1.4; color: var(--ink-dim); }
/* Sur une REPRISE, les parties déjà créées. Elles restent lisibles — il faut
   pouvoir vérifier qu'on reprend bien la bonne série — mais elles reculent :
   ce qui compte, ce sont celles qui manquent. */
.splan-part.splan-done { opacity: .5; }
.splan-part.splan-done .splan-num { color: var(--ok, #3ecf8e); }
/* L'avancement pendant la fabrication : c'est la seule chose qui bouge à
   l'écran pendant plusieurs minutes, elle doit se voir. */
.splan-progress {
  margin: .6rem 0 0; padding: .5rem .65rem; border-radius: 9px;
  background: rgba(254, 44, 85, .1); color: var(--ink);
  font-size: .78rem; line-height: 1.4;
}
.splan-acts { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }
/* ⚠️ UN BOUTON NE DOIT PAS SORTIR DE SA CARTE. Le libellé est écrit à l'exécution
   (« Publier la série « … » (4 parties en onglets) ») : sur un téléphone, un
   bouton qui refuse de couper son texte débordait de la carte par la gauche.
   `white-space: normal` le laisse passer à la ligne, `max-width` le borne. */
.splan-acts .btn { max-width: 100%; white-space: normal; text-align: center; }
@media (max-width: 520px) {
  .splan-acts { flex-direction: column-reverse; align-items: stretch; }
  .splan-acts .btn { width: 100%; }
}

/* ── « Ça peut vivre dans votre page » ────────────────────────────────────────
   Trois arguments, un par ligne, avec leur pictogramme : c'est un panneau qu'on
   ne verra qu'une fois, il doit se lire d'un seul coup d'œil. */
.slp-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
/* ⚠️ Deux colonnes = DEUX enfants, pas plus (voir le commentaire du HTML) :
   un nœud de texte nu deviendrait un élément de grille anonyme et tomberait
   dans la colonne du pictogramme, un mot par ligne. */
.slp-pts li {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: .55rem; align-items: start;
  font-size: .8rem; line-height: 1.45; color: var(--ink-dim);
}
.slp-ic { font-size: 1rem; line-height: 1.35; }
.slp-txt { min-width: 0; }
.slp-pts li b { color: var(--ink); font-weight: 650; }
#sl-promo .tpl-card { width: min(520px, 94vw); }
#sl-promo .tpl-head a { color: var(--accent); font-weight: 600; }

/* ── Arbre A/B ─────────────────────────────────────────────────────────────── */
.tree-body { padding: .9rem 1rem 1.1rem; overflow: auto; }
/* La recherche, au-dessus de la liste. L'arbre est devenu l'endroit où l'on
   PIOCHE dans tout son travail : à vingt pitchs, il faut pouvoir viser. */
#tree-q { margin-bottom: .7rem; }
.tree-cols { display: flex; gap: .7rem; align-items: flex-start; overflow-x: auto; padding-bottom: .4rem; }
.tree-col {
  flex: 0 0 auto; width: 220px;
  border: 1px solid var(--line); border-radius: 11px; padding: .6rem;
  background: var(--panel-2);
}
.tree-col.here { border-color: var(--accent); }
.tree-h { display: flex; align-items: baseline; gap: .35rem; margin-bottom: .4rem; }
.tree-h b {
  background: var(--accent); color: #fff; border-radius: 6px;
  padding: 0 .35rem; font-size: .74rem;
}
.tree-h span { font-size: .76rem; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-slides { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: 3px; }
.tree-slides li {
  display: flex; align-items: center; gap: .3rem;
  font-size: .76rem; padding: .25rem .35rem; border-radius: 6px;
  background: rgba(255,255,255,.04);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tree-take {
  margin-left: auto; flex: none; border: 0; background: rgba(255,255,255,.09);
  color: var(--ink); border-radius: 5px; width: 20px; height: 18px; cursor: pointer; font-size: .72rem;
}
.tree-take:hover { background: var(--accent); color: #fff; }
.tree-badge { font-size: .72rem; color: var(--accent); font-weight: 700; }

/* ── Colonne de droite : sections repliables ───────────────────────────────── */
.ins-fold > summary { cursor: pointer; list-style: none; }
.ins-fold > summary::-webkit-details-marker { display: none; }
.ins-fold > summary h3 { display: flex; align-items: center; gap: .4rem; }
.ins-fold > summary h3::after { content: "▾"; margin-left: auto; opacity: .5; font-size: .8em; }
.ins-fold[open] > summary h3::after { content: "▴"; }
.fold-sum { font-weight: 500; color: var(--accent); font-size: 11px; letter-spacing: 0; text-transform: none; }
.task-mine { border-bottom: 1px solid var(--line); padding-bottom: .8rem; margin-bottom: .5rem; }

/* ── Arbre des branches : poste de pilotage des tests A/B ──────────────────── */
.tree-col.win { box-shadow: 0 0 0 1px rgba(254,44,85,.35); }
.tree-h { position: relative; }
.tree-crown {
  border: 0; background: none; cursor: pointer; font-size: .8rem;
  opacity: .25; padding: 0 .1rem; margin-left: auto;
}
.tree-crown:hover { opacity: .7; }
.tree-crown.on { opacity: 1; }
.tree-meta { font-size: .7rem; color: var(--ink-dim); margin-bottom: .45rem; }
.tree-slides li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tree-acts { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.tree-act {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 7px; padding: .22rem .45rem; font: inherit; font-size: .72rem;
  font-weight: 600; cursor: pointer;
}
.tree-act:hover { background: #23232c; }
.tree-act.danger:hover { background: #7d2130; border-color: #7d2130; }

/* ── Stats ─────────────────────────────────────────────────────────────────── */
.audience-body { padding: .9rem 1.1rem 1.2rem; overflow-y: auto; }
.stats-tiles {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}
.stat {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 11px; padding: .6rem .7rem;
}
.stat b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.stat span { display: block; font-size: .74rem; color: var(--ink-dim); }
.stat i { display: block; font-style: normal; font-size: .68rem; color: var(--accent); margin-top: .15rem; }
.stbar { display: flex; align-items: center; gap: .5rem; margin-bottom: 5px; font-size: .78rem; }
.stbar-l { width: 5.5rem; color: var(--ink-dim); flex: none; }
.stbar-t { flex: 1; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.stbar-t i { display: block; height: 100%; background: #4a4a58; }
.stbar-t i.st-ready { background: #35a375; }
.stbar-t i.st-live { background: #3b82f6; }
.stbar-t i.st-outdated { background: #e0603c; }
.stbar-n { width: 1.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.stat-v { font-weight: 700; font-variant-numeric: tabular-nums; }
#stats-top li { cursor: pointer; }

@media (max-width: 860px) {
  .tree-col { width: 190px; }
  .stats-tiles { grid-template-columns: repeat(2, 1fr); }
  /* ⚠️ Une ligne d'arbre porte maintenant SEPT commandes (ouvrir, slide, image,
     habillage, joindre, variante, supprimer) : au téléphone elles écrasaient le
     titre jusqu'à le réduire à trois lettres. On les passe SOUS le titre, sur
     leur propre rangée — rien n'est masqué, tout reste au doigt.
     La cible tactile passe à 30 px : les 22 px du bureau se manquent au doigt. */
  .tr-node { flex-wrap: wrap; }
  .tr-lbl { flex: 1 1 100%; order: 1; }
  .tr-ic { order: 0; }
  .tr-meta { order: 2; flex: 1 1 auto; }
  .tr-cmds { order: 3; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .tr-cmd { width: 30px; height: 30px; font-size: .85rem; }
  #tree-q { font-size: 16px; }   /* sous 16 px, iOS zoome la page (cf. .cbar-in) */
}

/* ⚠️ Le rail est étroit : TOUT ce qui s'y trouve doit pouvoir rétrécir. Sans
   `min-width: 0` sur les conteneurs flex, un titre long pousse la ligne au-delà
   de la colonne (défaut vu sur les séries). */
.rail, .rail-block { min-width: 0; }
.ser-row, .ser-row-h, .ser-parts, .ser-parts li { min-width: 0; max-width: 100%; }
.ser-row-h b { flex: 1 1 auto; min-width: 0; }
.ser-list { max-width: 100%; }

/* ── Arbre global : séries → parties → branches ────────────────────────────── */
.tr { list-style: none; margin: 0; padding: 0; }
.tr-node {
  display: flex; align-items: center; gap: .45rem;
  padding: .4rem .5rem; border-radius: 8px; min-width: 0;
  /* Indentation par niveau : la hiérarchie se lit sans traits de liaison. */
  margin-left: calc(var(--d, 0) * 1.15rem);
}
.tr-node:hover { background: var(--panel-2); }
.tr-node.here { background: var(--accent-soft); }
.tr-series { font-size: .84rem; margin-top: .35rem; }
.tr-branch { font-size: .8rem; opacity: .95; }
.tr-ic { flex: none; width: 1.1rem; text-align: center; opacity: .7; font-size: .82rem; }
.tr-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.tr-lbl em { font-style: normal; font-size: .72rem; color: var(--ink-dim); }
.tr-meta { flex: none; font-size: .72rem; color: var(--ink-dim); white-space: nowrap; }
.tr-cmds { flex: none; display: flex; gap: 2px; align-items: center; }
.tr-cmds em { font-style: normal; font-size: .68rem; color: var(--accent); font-weight: 700; padding: 0 .25rem; }
.tr-cmd {
  border: 0; background: rgba(255,255,255,.06); color: var(--ink);
  border-radius: 6px; width: 24px; height: 22px; cursor: pointer;
  font-size: .76rem; line-height: 1; padding: 0;
}
.tr-cmd:hover { background: var(--accent); color: #fff; }
.tr-cmd.on { background: var(--accent); color: #fff; }
.tr-cmd.danger:hover { background: #7d2130; }
/* ✨ : la seule commande de l'arbre qui APPELLE l'assistant. Elle se distingue,
   sinon on ne la cherche pas — c'est pourtant d'ici qu'il travaille le mieux,
   avec la série entière sous les yeux. */
.tr-cmd.ai { background: rgba(254, 44, 85, .18); color: #ff8fa4; }
.tr-cmd.ai:hover { background: var(--accent); color: #fff; }
/* Ce que l'arbre sert AUSSI : dire ce que l'assistant voit. Sans cette ligne,
   personne ne devine que ce panneau alimente ses réponses. */
.tr-foot {
  margin: .9rem .2rem 0; padding-top: .7rem;
  border-top: 1px solid var(--line);
  font-size: .74rem; color: var(--ink-dim); line-height: 1.5;
}

@media (max-width: 860px) {
  .tr-meta { display: none; }          /* la place manque : les commandes priment */
  .tr-node { margin-left: calc(var(--d, 0) * .8rem); }
}

/* Pastilles de l'arbre : elles relient les vues entre elles (tâches, stats). */
.tr-pill {
  border: 0; background: rgba(255,255,255,.08); color: var(--ink-dim);
  border-radius: 999px; padding: 1px 6px; margin-left: 3px;
  font: inherit; font-size: .68rem; font-weight: 700; cursor: pointer;
}
.tr-pill:hover { background: var(--accent); color: #fff; }
.tr-pill.todo { background: rgba(254,44,85,.2); color: #ff8fa4; }

/* ══════════════════════════════════════════════════════════════════════════
   BARRE DE CONVERSATION — flottante, au centre, toujours à portée.
   Elle se pose AU-DESSUS de la scène sans lui prendre de place : l'éditeur
   reste entier derrière, on voit ce qui change pendant qu'on parle.
   ══════════════════════════════════════════════════════════════════════════ */
.cbar-wrap {
  position: fixed; z-index: 40;
  left: 50%; transform: translateX(-50%);
  bottom: 1.1rem;
  width: min(680px, calc(100vw - 2rem));
  display: grid; gap: .5rem;
  pointer-events: none;                 /* la scène reste cliquable autour */
}
.cbar-wrap > * { pointer-events: auto; }
/* ⚠️ ORDRE : les tiroirs (réglages, images) s'ouvrent AU-DESSUS de la barre,
   jamais en dessous. Écrits après elle dans le HTML, ils s'affichaient sous le
   pouce — sur téléphone ils passaient derrière la barre d'outils du bas et se
   retrouvaient à moitié coupés. La saisie reste en bas, là où est la main ;
   tout ce qui s'ouvre pousse vers le haut, comme dans une messagerie. */
.cbar-thread { order: 1; }
.cbar-sug { order: 2; }
.cbar-cfg { order: 2; }
.cbar-modes { order: 2; }
.cbar { order: 3; }

/* ── CE QUE L'ASSISTANT VA FAIRE ──────────────────────────────────────────────
   Collée sous les phrases proposées, juste au-dessus du champ : c'est la
   dernière chose qu'on voit avant d'envoyer. Une décision automatique qu'on
   n'affiche pas est une boîte noire — et c'était exactement le reproche fait à
   l'assistant (« je lui dis un truc, ça comprend pas »). */
.cbar-modes {
  display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none;
  padding: .1rem .15rem;
}
.cbar-modes::-webkit-scrollbar { display: none; }
.cb-mode {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid var(--line); background: rgba(26, 26, 34, .96);
  color: var(--ink-dim); border-radius: 999px;
  padding: .28rem .62rem; font: inherit; font-size: .76rem; font-weight: 600;
  white-space: nowrap; cursor: pointer; backdrop-filter: blur(10px);
  transition: color .15s, border-color .15s, background .15s;
}
.cb-mode:hover { color: var(--ink); border-color: #3a3a46; }
.cb-mode-ic { font-size: .85em; line-height: 1; }
/* Le mode IMPOSÉ : plein, sans ambiguïté. */
.cb-mode.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Le mode DÉDUIT en « Auto » : souligné, pas rempli. La nuance compte — l'un
   est un choix qu'on a fait, l'autre une lecture qu'on peut démentir d'un clic. */
.cb-mode.hinted:not(.active) {
  color: var(--ink);
  border-color: rgba(254, 44, 85, .5);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ── Phrases prêtes à coller ──────────────────────────────────────────────────
   Une rangée qui DÉFILE horizontalement plutôt qu'un pavé qui repousse la barre
   de saisie : la conversation doit rester au même endroit d'un pitch à l'autre.
   Les chips ne s'enroulent pas (`nowrap`) — une phrase coupée en deux lignes ne
   se lit plus d'un coup d'œil. */
.cbar-sug {
  display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none;
  padding: .1rem .15rem;
}
.cbar-sug::-webkit-scrollbar { display: none; }
.cbar-chip {
  flex: 0 0 auto; max-width: 24rem;
  border: 1px solid var(--line); background: rgba(26, 26, 34, .96);
  color: var(--ink-dim); border-radius: 999px;
  padding: .32rem .7rem; font: inherit; font-size: .8rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; backdrop-filter: blur(10px);
}
.cbar-chip:hover { color: var(--ink); border-color: #3a3a46; }
/* ⚠️ CELLE-CI N'EST PAS UNE PHRASE À COLLER. Les chips du dessus remplissent le
   champ ; celle-ci change un RÉGLAGE, et ce réglage double le coût de la
   génération. Même forme (c'est la même rangée, au même endroit), teinte
   d'accent : on doit voir qu'elle ne fait pas la même chose avant de la
   cliquer. */
#cbar-web-on { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
#cbar-web-on:hover { color: var(--accent); border-color: var(--accent); }
.cbar {
  display: flex; align-items: center; gap: .35rem;
  background: rgba(26, 26, 34, .96);
  border: 1px solid #35353f; border-radius: 999px;
  padding: .3rem .35rem .3rem .5rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
  backdrop-filter: blur(10px);
}
.cbar-in {
  flex: 1; min-width: 0;
  background: none; border: 0; color: var(--ink);
  font: inherit; font-size: .9rem; padding: .45rem .3rem;
}
.cbar-in:focus { outline: none; }
.cbar-ic, .cbar-go {
  flex: none; border: 0; cursor: pointer; line-height: 1;
  border-radius: 999px; width: 34px; height: 34px;
  display: grid; place-items: center; position: relative;
}
.cbar-ic { background: none; color: var(--ink-dim); font-size: .95rem; }
.cbar-ic:hover { background: rgba(255, 255, 255, .08); color: var(--ink); }
.cbar-go { background: var(--accent); color: #fff; font-size: 1rem; font-weight: 700; }
.cbar-go:disabled { opacity: .45; cursor: default; }
.cbar-n {
  position: absolute; top: 1px; right: 1px;
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: .58rem; font-weight: 700; padding: 0 3px; line-height: 1.35;
}

/* Le fil : court, au-dessus de la barre. Il ne doit jamais manger l'écran. */
.cbar-thread {
  max-height: 34vh; overflow-y: auto;
  display: grid; gap: .35rem;
  background: rgba(19, 19, 25, .96);
  border: 1px solid var(--line); border-radius: 14px;
  padding: .6rem .7rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  backdrop-filter: blur(10px);
}
.cb-turn {
  font-size: .84rem; line-height: 1.4;
  padding: .4rem .6rem; border-radius: 11px;
  max-width: 86%; word-break: break-word;
}
.cb-user { background: var(--accent); color: #fff; justify-self: end; }
.cb-ai { background: var(--panel-2); color: var(--ink); justify-self: start; }
.cb-wait { opacity: .6; letter-spacing: .25em; }

.cbar-cfg {
  background: rgba(19, 19, 25, .97);
  border: 1px solid var(--line); border-radius: 14px;
  padding: .7rem .8rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  max-height: 46vh; overflow-y: auto;
}
.cbar-cfg .chips { margin-bottom: .4rem; }
.cbar-cfg .rail-head { margin-bottom: .5rem; }
.cbar-cfg .thumbs { margin-bottom: .35rem; }
.cbar-cfg .hint { margin: 0; }
/* Le tiroir a absorbé le grand panneau : il porte maintenant la portée, les
   cases, le modèle, la mémoire et l'historique. Il lui faut donc des respirations
   et une hauteur un peu plus généreuse — mais jamais plein écran, la scène doit
   rester visible pendant qu'on règle. */
.cbar-cfg { max-height: 62vh; }
.cbar-cfg .field-lbl { display: block; margin: .6rem 0 .3rem; }
.cbar-cfg > .field-lbl:first-child,
.cbar-cfg > div:first-child > .field-lbl { margin-top: 0; }
.cbar-cfg .seg { margin-bottom: .2rem; }
.cbar-cfg .pick-list { max-height: 12rem; overflow-y: auto; margin: .3rem 0 0; }
.cbar-cfg textarea.field { margin-bottom: .3rem; }

/* Mémoire et conversations : repliés, parce qu'on y revient rarement — mais à
   l'intérieur du même tiroir, parce que les chercher ailleurs, c'est ne jamais
   les trouver. */
.cb-fold { margin-top: .7rem; border-top: 1px solid var(--line); padding-top: .55rem; }
.cb-fold > summary {
  cursor: pointer; list-style: none;
  font-size: .78rem; font-weight: 700; color: var(--ink-dim);
  display: flex; align-items: center; gap: .4rem;
}
.cb-fold > summary::-webkit-details-marker { display: none; }
.cb-fold > summary::before { content: "▸"; font-size: .7em; transition: transform .15s; }
.cb-fold[open] > summary::before { transform: rotate(90deg); }
.cb-fold > summary:hover { color: var(--ink); }
.cb-fold-n {
  margin-left: auto; background: var(--panel-2); color: var(--ink-dim);
  border-radius: 999px; padding: 0 .38rem; font-size: .68rem;
}
.cb-cfg-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-top: .7rem; padding-top: .55rem; border-top: 1px solid var(--line);
  font-size: .76rem; flex-wrap: wrap;
}

/* Une ligne JOINTE au contexte (ou la conversation ouverte) : on doit la
   repérer d'un coup d'œil dans une liste, sans lire le bouton. */
.pick-row.is-on { background: rgba(254, 44, 85, .1); border-radius: 9px; }
.pick-row.pick-head { opacity: .85; }
.pick-add.danger { color: #ff6b6b; }

/* ── Une question de l'IA ─────────────────────────────────────────────────────
   Ses réponses probables sont des boutons : répondre doit coûter un doigt, pas
   une phrase à retaper. Sinon la question fait perdre plus qu'elle ne rapporte,
   et l'assistant devient pénible au lieu d'être précis. */
.cb-ask { border-color: rgba(254, 44, 85, .35); }
.cb-opts { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.cb-opt {
  border: 1px solid rgba(254, 44, 85, .35);
  background: rgba(254, 44, 85, .1);
  color: var(--ink); font: inherit; font-size: .78rem; font-weight: 600;
  padding: .3rem .6rem; border-radius: 999px; cursor: pointer;
}
.cb-opt:hover { background: var(--accent); color: #fff; }

/* Mobile : la barre remonte au-dessus des outils, et le fil raccourcit. */
@media (max-width: 860px) {
  .cbar-wrap {
    width: calc(100vw - 1.2rem);
    bottom: calc(4rem + env(safe-area-inset-bottom));
  }
  /* ⚠️ 16 px, PAS moins. En dessous, iOS zoome la page dès qu'on touche le
     champ — c'est exactement ce que voyait Javi : « quand j'ouvre le chat
     l'interface se zoome seule ». Ce n'était pas un bug de mise en page mais
     l'auto-zoom de Safari, qui ne se déclenche jamais à partir de 16 px. Tous
     les autres champs de l'outil sont déjà à 16 px (`.field`) : celui-ci était
     le seul oublié, parce qu'il n'a pas la classe `.field`. */
  .cbar-in { font-size: 16px; }
  .cbar-thread { max-height: 26vh; }
  /* Le tiroir a absorbé le grand panneau : sur téléphone il ne doit pas manger
     l'écran, il défile. Et ses champs suivent la règle des 16 px ci-dessus —
     `textarea.field` l'a déjà, mais la recherche des pitchs joints, non. */
  .cbar-cfg { max-height: 54vh; }
  .cbar-cfg .pick-list { max-height: 9rem; }
  #cbar-ctx-q { font-size: 16px; }
  /* Le FAB laisserait la barre sous lui : on le remonte. */
  .fab { bottom: calc(8.2rem + env(safe-area-inset-bottom)); }
  .fab-menu { bottom: calc(13rem + env(safe-area-inset-bottom)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   SIMPLICITÉ PAR DÉFAUT
   Règle : la colonne de droite ne montre QUE ce qu'on touche pour composer
   (Format, Fond, Texte). Tout le reste est replié — présent, à un clic, mais
   hors du chemin. La barre du haut suit la même règle : composer d'abord, le
   pilotage (tâches, branches, stats) derrière ⋯.
   ══════════════════════════════════════════════════════════════════════════ */
.ins-fold > summary {
  cursor: pointer; list-style: none;
  padding: .1rem 0; user-select: none;
}
.ins-fold > summary::-webkit-details-marker { display: none; }
.ins-fold > summary h3 { display: flex; align-items: center; gap: .4rem; margin: 0; }
.ins-fold > summary h3::after {
  content: "＋"; margin-left: auto; opacity: .45;
  font-size: .95em; font-weight: 400; transition: transform .15s;
}
.ins-fold[open] > summary h3::after { content: "−"; }
.ins-fold > summary:hover h3::after { opacity: 1; }
.ins-fold[open] > summary { margin-bottom: .5rem; }
/* Repliée, une section ne pèse qu'une ligne. */
.ins-fold:not([open]) { padding-bottom: .55rem; }

/* Menu ⋯ de la barre du haut. */
.more-wrap { position: relative; }
.more-menu {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 50;
  min-width: 190px; display: grid; gap: 2px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 11px; padding: .3rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.more-menu button {
  display: flex; align-items: center; gap: .45rem;
  border: 0; background: none; color: var(--ink);
  font: inherit; font-size: .85rem; font-weight: 600;
  padding: .5rem .6rem; border-radius: 8px; cursor: pointer; text-align: left;
}
.more-menu button:hover { background: var(--panel-2); }
/* L'aide est un vrai LIEN (nouvelle page, ouvrable dans un onglet), pas un
   bouton : elle doit juste se fondre dans le menu. */
.more-menu .more-link {
  display: flex; align-items: center; gap: .45rem;
  color: var(--ink); text-decoration: none;
  font: inherit; font-size: .85rem; font-weight: 600;
  padding: .5rem .6rem; border-radius: 8px; text-align: left;
}
.more-menu .more-link:hover { background: var(--panel-2); color: var(--ink); }
#more-open { position: relative; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — c'est là que les gens travaillent.
   La slide occupe l'écran, les réglages remontent en feuille depuis le bas,
   une seule à la fois. Rien ne doit demander de viser.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* Toutes les sections dépliées dans la feuille : on y entre déjà par un
     onglet précis, un second pliage serait un clic de trop. */
  .sheet .ins-fold > summary h3::after { display: none; }

  /* Cibles tactiles : 44 px minimum, recommandation Apple comme Google. */
  .btn { padding: .6rem .9rem; }
  .btn-sm { padding: .45rem .7rem; font-size: 13.5px; }
  .btn-icon { padding: .55rem; }
  .field { padding: .6rem .7rem; font-size: 16px; }   /* 16px : pas de zoom iOS */
  .field-sm { padding: .45rem .6rem; font-size: 16px; }
  select.field, input.field, textarea.field { font-size: 16px; }

  /* Les nuanciers deviennent des cibles au doigt, pas des confettis. */
  .swatches { grid-template-columns: repeat(4, 1fr); gap: .45rem; }
  .swatches-flat { grid-template-columns: repeat(6, 1fr); gap: .35rem; }
  .swatches-scroll { grid-template-columns: repeat(4, 1fr); max-height: 210px; }
  .sw { width: 38px; height: 38px; }

  /* Le menu ⋯ prend toute la largeur : on ne vise pas un menu de 190 px. */
  .more-menu {
    position: fixed; left: .6rem; right: .6rem; top: auto;
    bottom: calc(4.6rem + env(safe-area-inset-bottom));
    min-width: 0; padding: .4rem;
  }
  .more-menu button { padding: .75rem .7rem; font-size: .92rem; }

  /* Panneaux plein écran : une modale à 94 vw laisse des bords inutiles. */
  .tpl-card, .pick-card, .ai-card {
    width: 100vw; max-width: 100vw;
    inset: auto 0 0 0; transform: none;
    max-height: 92vh; border-radius: 16px 16px 0 0;
  }
  .tpl-head { padding: .8rem .9rem; }
  .tpl-head p { font-size: .78rem; }

  /* L arbre passe en liste verticale : le défilement horizontal au doigt
     entre en conflit avec le balayage de l app. */
  .tree-cols { flex-direction: column; }
  .tree-col { width: 100%; }
}

/* Très étroit : on sacrifie les libellés, jamais les commandes. La marque, elle,
   reste — c'est le seul repère qui dise où on est. */
@media (max-width: 400px) {
  .deck-title { max-width: 8rem; }
  .save-state { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   OUVERTURE DES FEUILLES — règle FINALE, volontairement en fin de fichier.
   `body[data-sheet="x"] .inspector` matchait bien et le média était actif, mais
   la cascade laissait `visibility: hidden` : la feuille restait invisible. Une
   classe posée sur l'élément par openSheet(), déclarée en dernier, ne peut plus
   être prise de vitesse par quoi que ce soit.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .rail.sheet-on,
  .inspector.sheet-on { transform: translateY(0); visibility: visible; }

  /* La barre de conversation masquait la barre de zoom : elle se range
     au-dessus, et disparaît quand une feuille occupe déjà l'écran. */
  .zoom-bar { bottom: calc(8.6rem + env(safe-area-inset-bottom)); }
  body[data-sheet] .cbar-wrap { display: none; }
}
/* Bureau : même conflit, la barre flottante passait devant la barre de zoom. */
@media (min-width: 861px) {
  .zoom-bar { bottom: 4.6rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CONVERSATION — apparence
   Le rouge plein sur la bulle utilisateur était agressif : c'est la couleur
   d'action de l'outil, pas celle d'un dialogue. On garde une teinte de rappel,
   discrète, et on met le soin dans le MOUVEMENT plutôt que dans la saturation.
   ══════════════════════════════════════════════════════════════════════════ */
.cb-user {
  background: rgba(254, 44, 85, .13);
  color: var(--ink);
  border: 1px solid rgba(254, 44, 85, .28);
}
.cb-ai {
  background: var(--panel-2);
  border: 1px solid var(--line);
}
/* Chaque message arrive, il n'apparaît pas d'un coup.
   `backwards` et non `both` : une animation d'ENTRÉE n'a rien à retenir une fois
   finie. Avec `both`, un rendu où l'animation ne tourne pas (onglet en veille,
   capture automatisée) laisse la bulle bloquée à `opacity: 0` — invisible. */
.cb-turn { animation: cb-in .26s cubic-bezier(.22, .61, .36, 1) backwards; }
@keyframes cb-in {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
}

/* Attente : trois points qui respirent + l'étape en cours, nommée. Une attente
   muette paraît deux fois plus longue. */
.cb-wait { display: flex; align-items: center; gap: .5rem; letter-spacing: normal; opacity: 1; }
.cb-wait i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: cb-dot 1.1s ease-in-out infinite;
}
.cb-wait i:nth-child(2) { animation-delay: .16s; }
.cb-wait i:nth-child(3) { animation-delay: .32s; }
.cb-wait span { font-size: .8rem; color: var(--ink-dim); animation: cb-fade .3s both; }
@keyframes cb-dot {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@keyframes cb-fade { from { opacity: 0; } }

/* La barre réagit : elle se soulève à la saisie, le bouton pulse pendant le
   travail. Le détail qui fait qu'un outil paraît vivant. */
.cbar { transition: border-color .18s, box-shadow .18s, transform .18s; }
.cbar:focus-within {
  border-color: rgba(254, 44, 85, .5);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6), 0 0 0 3px rgba(254, 44, 85, .1);
  transform: translateY(-1px);
}
.cbar-go { transition: transform .16s, opacity .16s; }
.cbar-go:not(:disabled):hover { transform: scale(1.08); }
.cbar-go:disabled { animation: cb-pulse 1.3s ease-in-out infinite; }
@keyframes cb-pulse { 50% { opacity: .55; } }

.cbar-thread { animation: cb-in .22s backwards; }

@media (prefers-reduced-motion: reduce) {
  .cb-turn, .cbar-thread { animation: none; }
  .cb-wait i, .cbar-go:disabled { animation: none; }
}

/* Barre de conversation repliable : elle ne doit jamais être subie. */
.cbar-show {
  position: fixed; z-index: 41;
  left: 50%; transform: translateX(-50%);
  bottom: 1.1rem;
  border: 1px solid #35353f; background: rgba(26, 26, 34, .96);
  color: var(--ink); border-radius: 999px;
  padding: .5rem 1rem; font: inherit; font-size: .88rem; cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5); backdrop-filter: blur(10px);
  animation: cb-in .2s both;
}
.cbar-show:hover { border-color: rgba(254, 44, 85, .5); }
@media (max-width: 860px) {
  .cbar-show { bottom: calc(4rem + env(safe-area-inset-bottom)); }
  body[data-sheet] .cbar-show { display: none; }
}

/* ⚠️ Le menu ⋯ est en position FIXE, pas absolue : sous 1180 px la barre
   d'actions passe en `overflow-x: auto` pour ne pas pousser le titre hors de
   l'écran, et un menu en absolu s'y retrouve DÉCOUPÉ donc invisible.
   Mais une position fixe EN DUR tombait à côté du bouton sur bureau et écrasait
   l'ancrage bas du mobile — c'est donc `placeMore()` qui l'aligne, au pixel, à
   chaque ouverture. Ici on ne fait que neutraliser les décalages héritées. */
.more-menu { position: fixed; left: auto; right: auto; top: auto; bottom: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — barre du haut réduite au strict, ajustement escamotable
   ══════════════════════════════════════════════════════════════════════════ */
.burger-wrap { position: relative; display: none; }

@media (max-width: 860px) {
  /* Sur mobile la barre ne tient pas 8 boutons au pouce : Partager, Assistant,
     Modèles et les exports passent dans le burger. */
  .burger-wrap { display: block; }
  .top-hide { display: none; }

  /* La barre d'ajustement se range sur le CÔTÉ : elle n'est utile que par
     à-coups, et elle mangeait la scène en permanence. Un onglet la rappelle. */
  .zoom-bar {
    left: auto; right: 0;
    transform: translateX(calc(100% - 26px));
    transition: transform .22s cubic-bezier(.22, .61, .36, 1);
    border-radius: 12px 0 0 12px;
    padding-left: 26px;                    /* la poignée reste attrapable */
  }
  .zoom-bar::before {
    content: "⇤"; position: absolute; left: 0; top: 0; bottom: 0; width: 26px;
    display: grid; place-items: center; color: var(--ink-dim); font-size: .9rem;
  }
  .zoom-bar.on { transform: translateX(0); }
  .zoom-bar.on::before { content: "⇥"; }
}

/* ════════════════════════════════════════════════════════════════════════════
   STATISTIQUES (panneau Partager)

   Graphique en barres fait à la main, en div : trente jours de données ne
   justifient pas une bibliothèque, et le site est délibérément sans dépendance
   (même parti pris que pitch-pdf.js et pitch-zip.js face à jsPDF/JSZip).
   ════════════════════════════════════════════════════════════════════════════ */
.audience-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }

.audience-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .8rem 0 .6rem; }
.aud-kpi {
  background: var(--panel-2, #1a1a22); border: 1px solid var(--line, #26262f);
  border-radius: 10px; padding: .55rem .5rem; text-align: center; min-width: 0;
}
.aud-kpi b { display: block; font-size: 1.15rem; line-height: 1.2; letter-spacing: -.02em; }
.aud-kpi span { display: block; font-size: .68rem; color: var(--ink-dim, #9a9aa8); margin-top: .15rem; }

/* Une colonne par jour. `align-items: flex-end` fait pousser les barres depuis
   le bas ; la hauteur est posée en style en ligne par renderStats(). */
.audience-chart {
  display: flex; align-items: flex-end; gap: 2px;
  height: 68px; margin: .2rem 0 .5rem;
}
.audience-chart .bar {
  flex: 1 1 0; min-width: 0; border-radius: 2px 2px 0 0;
  background: var(--accent, #fe2c55); opacity: .82;
}
/* Un jour sans lecteur reste VISIBLE — un trou dans la rangée se lit comme un
   bug d'affichage, alors qu'un creux se lit comme une information. */
.audience-chart .bar.empty { background: var(--line, #26262f); opacity: 1; }

/* ════════════════════════════════════════════════════════════════════════════
   MARQUEUR PREMIUM — le « P » doré

   Posé sur TOUT ce que le Pass Spotlite débloque, et nulle part ailleurs : la
   marque, les boutons de lien, l'image cliquable, le bouton du pitch, les
   maquettes au-delà du téléphone, les statistiques. La règle doit se deviner
   d'un coup d'œil, sans lire une page de tarifs.
   ════════════════════════════════════════════════════════════════════════════ */
.pro-tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex: none;
  margin-left: .35rem; vertical-align: middle;
  border-radius: 4px;
  font-size: .62rem; font-weight: 900; line-height: 1;
  color: #3a2a00;
  /* Doré : un dégradé, sinon l'aplat jaune passe pour un avertissement. */
  background: linear-gradient(150deg, #ffdc73, #e6a913);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  cursor: help;
}
/* Une puce d'appareil verrouillée reste LISIBLE et cliquable (le clic explique
   pourquoi), simplement en retrait — un élément à moitié effacé se lit comme un
   bug d'affichage. */
.chip.is-pro { position: relative; opacity: .72; }
.chip.is-pro:hover { opacity: 1; }
.chip.is-pro .pro-tag { width: 13px; height: 13px; font-size: .56rem; margin-left: .3rem; }

/* Champ réservé au Pass : désactivé, mais on garde le texte lisible — l'auteur
   doit voir ce qu'il a écrit avant de perdre son pass. */
.field:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }

/* Le bandeau d'explication, sous un bloc verrouillé. */
.pro-note {
  border-left: 3px solid #e6a913;
  background: rgba(230, 169, 19, .09);
  border-radius: 0 8px 8px 0;
  padding: .5rem .65rem; margin: .5rem 0 0;
}

/* ── TRAVAILLER À PLUSIEURS ────────────────────────────────────────────────
   Le partage à droits : la liste des invités, et le bandeau de lecture seule. */
.share-add { display: flex; gap: .4rem; align-items: center; margin-top: .4rem; }
.share-add .field { flex: 1; min-width: 0; }
.share-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.share-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .5rem; border-radius: .5rem; background: var(--panel-2, rgba(255,255,255,.04));
}
.share-who { flex: 1; min-width: 0; font-size: .82rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-who i { opacity: .6; font-style: normal; }
.share-seg { flex: none; }
.share-seg .seg-btn { padding: .18rem .45rem; font-size: .7rem; }

/* Le bandeau flotte au-dessus de la scène, comme la barre de conversation.
   ⚠️ `pointer-events` reste actif SUR le bandeau (on doit pouvoir cliquer
   « copier chez moi ») alors que la page, elle, est gelée plus bas. */
.ro-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  z-index: 60; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  justify-content: center; max-width: min(92vw, 40rem);
  padding: .5rem .8rem; border-radius: 999px;
  background: rgba(20, 20, 26, .94); color: #f2f2f5;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  font-size: .8rem; line-height: 1.35; text-align: center;
}
.ro-banner b { font-weight: 700; }

/* ⚠️ ON GÈLE L'ÉDITION, ON NE MASQUE RIEN. Le pitch doit rester LISIBLE (c'est
   tout l'intérêt d'un partage en lecture) : on neutralise donc les surfaces qui
   MODIFIENT, pas celles qui montrent. Les vraies barrières restent
   `save()` et les règles Firestore — ceci n'est que l'affichage honnête. */
body.is-readonly .inspector,
body.is-readonly .rail-slides,
body.is-readonly .cbar-wrap,
body.is-readonly #add-open,
body.is-readonly #slide-add { pointer-events: none; opacity: .55; }
body.is-readonly .ro-banner { pointer-events: auto; opacity: 1; }

/* Les actions d'une série, sur LEUR propre ligne : le nom garde toute la
   largeur au-dessus (voir `renderSeriesJoin`). Alignées à droite pour rester
   discrètes, et assez espacées pour rester cliquables au doigt. */
.ser-acts { display: flex; align-items: center; justify-content: flex-end; gap: .3rem; margin-top: .25rem; }
.ser-acts .ser-plus, .ser-acts .ser-act { flex: none; }
/* Le nom d'une série peut être long (« Portfolio : mon impact en trois actes »).
   Sur une seule ligne, le rail le coupe aux points de suspension et on ne
   distingue plus deux séries voisines. Il passe donc sur DEUX lignes au plus —
   au-delà, la ligne de série mangerait la liste des parties. */
.ser-row-h b {
  white-space: normal; text-overflow: clip;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.25;
}

/* Le mot trop long qui écrase le titre. Ambre plutôt que rouge : ce n'est pas
   une erreur, c'est une conséquence à connaître — le texte reste valide. */
.hint-word { border-left: 3px solid var(--warn, #e6a913); padding-left: .5rem; }
.hint-word b { color: var(--ink); }

/* ── Panneau Collaboration ───────────────────────────────────────────────────
   Même carte que Tâches et Stats. Elle DÉFILE d'elle-même : `.tpl-card` est
   plafonnée et en `overflow: hidden` — c'est exactement l'oubli qui avait rendu
   « Travailler à plusieurs » inatteignable au fond du panneau Partager. */
.collab-card { overflow-y: auto; }
.collab-card .tpl-head { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.collab-body { padding: .9rem 1.2rem 1.2rem; }
.collab-body .ai-h3:first-child { margin-top: 0; }

.collab-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.collab-list .empty {
  padding: .55rem .65rem; font-size: .78rem; color: var(--ink-dim);
}
.collab-row {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: .5rem .65rem; border-radius: 9px; background: var(--panel-2);
  border: 1px solid transparent;
}
.collab-row:hover { border-color: var(--line); }
.collab-row.is-open { border-color: var(--accent); }
.collab-t { flex: 1; min-width: 0; }
.collab-t b { display: block; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collab-t span { display: block; font-size: .74rem; color: var(--ink-dim); }
.collab-go { flex: none; font-size: .72rem; font-weight: 700; color: var(--accent); }

/* ── La marque de partage dans la liste des pitchs ───────────────────────────
   Même gabarit que la pastille Public/Privé, à côté de laquelle elle se pose. */
.d-share {
  flex: none; font-size: .62rem; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.07); color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; max-width: 11ch;
}
/* Un pitch qui n'est pas le mien se voit du premier coup d'œil : c'est la seule
   marque qui change ce qu'on a le droit d'y faire. */
.d-share.is-guest { background: var(--accent-soft); color: #ffd7df; max-width: 16ch; }

/* Panneau « Importer du JSON » : la ligne de source (fichier | ou collez).
   Une seule règle — le reste du panneau réutilise les classes de `link-dlg`. */
.json-src { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; flex-wrap: wrap; }
.json-src .hint { margin: 0; }
#json-text { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.45; resize: vertical; }

/* ══════════════════════════════════════════════════════════════════════════
   REFONTE 2026-10 — l'éditeur prend l'ADN de l'app web Spotlite et de la
   Marketplace (assets/market.css) :
     · noir profond, verre dépoli, coins plus ronds, boutons en pilules ;
     · BLEU à plat pour la sélection et les actions (slide active, choix) ;
     · bouton principal BLANC (Exporter PDF) ;
     · DORÉ réservé à l'IA : la barre de l'assistant, ses modes, son envoi —
       comme dans l'app, on voit d'un coup d'œil ce qui est généré.
   Le rouge reste UNIQUEMENT dans le mot « Pitch » (la marque).
   Couche posée par-dessus l'existant : mêmes classes, aucune logique touchée.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #050506;
  --panel: #0c0c0f;
  --panel-2: #17171c;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --ink: #ffffff;
  --ink-dim: rgba(255, 255, 255, .58);
  --accent: #1d9bf0;
  --accent-soft: rgba(29, 155, 240, .15);
  --ai: #f4b78a;
  --ai-2: #e79b6d;
  --ai-soft: rgba(244, 183, 138, .14);
  --radius: 14px;
  --top-h: 60px;
}
html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.brand b { color: #fe2c55; }

/* Barre du haut : fond PLEIN, sans `backdrop-filter`.
   ⚠️ Un flou d'arrière-plan fait de la barre un CONTEXTE D'EMPILEMENT : ses
   menus déroulants (⋯, ☰, ＋) y restaient piégés et passaient SOUS
   l'inspecteur — constaté en prod le 05/10, menu « ⋯ » illisible. Ne pas
   remettre de flou ici. */
.top { background: #08080a; border-bottom-color: var(--line); }
.deck-title { border-radius: 10px; }
.deck-title:hover { border-color: var(--line); background: rgba(255,255,255,.03); }
.deck-title:focus { background: rgba(255,255,255,.06); border-color: rgba(29,155,240,.6); box-shadow: 0 0 0 3px rgba(29,155,240,.16); }

/* Boutons : pilules ; principal blanc. */
.btn { border-radius: 999px; border-color: var(--line); background: rgba(255,255,255,.06); padding: .5rem .95rem; transition: background .15s, border-color .15s, color .15s; }
.btn:hover:not(:disabled) { background: rgba(255,255,255,.11); border-color: var(--line-2); }
.btn-primary { background: #fff; border-color: #fff; color: #050506; }
.btn-primary:hover:not(:disabled) { background: rgba(255,255,255,.86); border-color: rgba(255,255,255,.86); }
.btn-ghost { background: transparent; }
.btn-sm { border-radius: 999px; padding: .34rem .75rem; }
.btn-icon { padding: .5rem; }

/* Champs. */
.field { border-radius: 12px; background: rgba(255,255,255,.05); border-color: var(--line); }
.field:focus { border-color: rgba(29,155,240,.65); box-shadow: 0 0 0 3px rgba(29,155,240,.16); background: rgba(255,255,255,.07); }
.range { accent-color: var(--accent); }

/* Sélections : bleu, texte blanc (l'ancien rose pâle venait du rouge). */
.deck-list li { border-radius: 10px; }
.deck-list li.active, .chip.active, .seg-btn.active, .tpl-cat.active, .d-share.is-guest { color: #fff; }
.deck-list li:hover { background: rgba(255,255,255,.06); }
.chip, .seg-btn, .tpl-cat { border-radius: 999px; }
.seg-btn { background: rgba(255,255,255,.05); }

/* Rail et inspecteur. */
.rail, .inspector { background: var(--panel); border-color: var(--line); }
.rail-block { border-bottom-color: var(--line); }
.ins-group { border-bottom-color: var(--line); padding-bottom: 1.05rem; margin-bottom: 1.05rem; }
.ins-group h3, .rail-head h2 { font-size: 11px; letter-spacing: .08em; color: var(--ink-dim); }
.slide-strip li { border-radius: 12px; }
.slide-strip li.active { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(29,155,240,.16); }

/* Scène : table de travail pointillée. */
.stage {
  background-color: #08080a;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.stage-canvas { border-radius: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.zoom-bar { background: rgba(20,20,24,.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--line-2); border-radius: 999px; }

/* Menus : verre. */
.more-menu { background: #141418; border-color: var(--line-2); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.more-menu button, .more-menu .more-link { border-radius: 10px; }
.more-menu button:hover, .more-menu .more-link:hover { background: rgba(255,255,255,.08); }

/* ── L'ASSISTANT IA : doré ──────────────────────────────────────────────── */
.cbar { background: rgba(20, 20, 24, .9); border-color: rgba(244, 183, 138, .32); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.cbar:focus-within { border-color: rgba(244, 183, 138, .62); box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 0 3px rgba(244, 183, 138, .14); }
.cbar-go { background: linear-gradient(135deg, var(--ai), var(--ai-2)); color: #1a1008; }
.cbar-n { background: var(--ai); color: #1a1008; }
.cb-mode, .cbar-chip { background: rgba(20, 20, 24, .9); border-color: var(--line); }
.cb-mode.active { background: var(--ai); border-color: var(--ai); color: #1a1008; }
.cb-mode.hinted:not(.active) { border-color: rgba(244, 183, 138, .55); box-shadow: inset 0 -2px 0 var(--ai); }
#cbar-web-on { color: var(--ai); border-color: var(--ai-soft); background: var(--ai-soft); }
#cbar-web-on:hover { color: var(--ai); border-color: var(--ai); }
.cbar-thread { background: rgba(16, 16, 20, .94); border-color: var(--line-2); border-radius: 18px; }
.cb-user { background: rgba(255, 255, 255, .07); border-color: var(--line-2); }
.cb-ai { background: var(--ai-soft); border-color: rgba(244, 183, 138, .22); }
.cb-ask { border-color: rgba(244, 183, 138, .4); }
.cb-wait i { background: var(--ai); }
.cbar-show:hover { border-color: rgba(244, 183, 138, .55); }
.tr-cmd.ai { background: var(--ai-soft); color: var(--ai); }
.pick-row.is-on { background: var(--accent-soft); }
@media (max-width: 860px) {
  .fab { background: #fff; color: #050506; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
}