/* ── ce qui est PROPRE au rapport publié ───────────────────────────
   Tout ce qui est réutilisable est déjà dans le socle. Ne vit ici que la mise
   en page des trois colonnes et l'habillage d'une mesure, repris de la planche. */

.report-doc { flex-direction: row; }
.report-workspace { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.report-body { position: relative; }
.report-mobile-switch { align-self: center; margin: 5px 0; }
.report-doc:not(.nav-closed) #navReveal { display: none; }
.report-doc:not(.is-owner) .sidebar, .report-doc:not(.is-owner) #navReveal { display: none !important; }

/* Les deux colonnes de droite : scène épinglée + article. */
.pub-content-row {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; gap: var(--s5); padding: var(--s5);
  align-items: flex-start; scroll-behavior: smooth;
}
/* ── rail de bord ────────────────────────────────────────────────
   Le rail lui-même vit dans mu-shell.css (primitive partagée). Ici, seulement
   son calage vertical sur le bandeau de la scène, et qui s'y montre.
   Ordre : menu, scène. */
.edge-rail { top: calc(var(--s5) + 5px); }
/* Celui de la scène ne paraît dans le rail QUE scène masquée : tant qu'elle est
   à l'écran, c'est son propre bandeau qui porte le bouton, à droite. Deux
   boutons, un seul état -- voir setSceneHidden(). */
#sceneToggle { display: none; }
.shell__body.scene-collapsed #sceneToggle { display: flex; }
#editToggle { position: relative; margin-top: clamp(90px, 25vh, 280px); background: var(--primary-soft); }
#editToggle.has-changes::after { content: ''; position: absolute; width: 6px; height: 6px;
  margin: -21px 0 0 21px; border-radius: 50%; background: var(--danger); }
#pdfExport { font-size: 16px; }
.report-doc:not(.is-owner) #editToggle { display: none; }
.report-edit-actions { display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s2); padding: 6px var(--s4); background: var(--bg-surface);
  border-bottom: 1px solid var(--border-soft); }
.report-edit-actions[hidden] { display: none; }
.report-edit-actions #editStatus { margin-right: auto; color: var(--ink-muted); font-size: var(--fs-xs); }
.report-edit-actions.is-dirty #editStatus { color: var(--danger); font-weight: 600; }
.report-edit-actions button:disabled { opacity: .55; cursor: not-allowed; }
.pub-article.is-editing [data-edit-field] { cursor: text; border-radius: 4px;
  outline: 1px dashed var(--border); outline-offset: 3px; white-space: pre-wrap; }
.pub-article.is-editing [data-edit-field]:hover { outline-color: var(--primary); }
.pub-article.is-editing [data-edit-field]:focus { outline: 2px solid var(--primary); background: var(--bg-surface); }
.pub-article.is-editing [data-edit-field]:empty::before { content: attr(data-placeholder); color: var(--ink-muted); }
.pub-article.is-editing .rsub-comment:empty, .pub-article.is-editing .rsec-comment:empty { min-height: 1.5em; }
.report-delete { margin-left: auto; }
.report-delete[hidden] { display: none; }
.report-confirm { max-width: min(420px, calc(100vw - 32px)); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s4); background: var(--bg-surface);
  color: var(--ink); box-shadow: var(--shadow-lg); }
.report-confirm::backdrop { background: rgba(21,30,45,.48); }
.report-confirm h2 { font-size: var(--fs-lg); margin: 0 0 var(--s3); }
.report-confirm p { font-size: var(--fs-sm); margin: 0 0 var(--s4); }
.report-confirm-actions { display: flex; justify-content: flex-end; gap: var(--s2); }
.pub-article.is-editing .rgroup-head { cursor: default; text-transform: none; }
.pub-article.is-editing .rgroup-caret { display: none; }
/* La gouttière du rail est réservée en permanence : rien ne doit se décaler
   quand un bouton y apparaît. */
.pub-content-row { padding-left: calc(var(--s5) + 26px); }

.pub-scene {
  position: sticky; top: 0; flex: none;
  /* +15 % sur la largeur par défaut (2026-09-24) : la scène est le sujet du
     rapport, pas une vignette d'appoint. */
  width: clamp(322px, 30vw, 483px);
  /* Carte sans liseré, comme les panneaux de C-1 (mu-shell.css, section
     PANNEAU) : la profondeur separe mieux que le trait. */
  border: none; border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-surface); box-shadow: var(--shadow-sm);
  transition: width var(--dur) var(--ease);
}
/* Masquée, la scène disparaît -- elle ne laisse pas de ruban. Son retour est le
   bouton du rail, et lui seul : un seul geste à connaître, quelle que soit la
   taille de l'écran. */
.pub-scene.collapsed { display: none; }
.pub-scene-head {
  height: 40px; flex: none; display: flex; align-items: center; gap: 6px;
  padding: 0 var(--s3);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}
.pub-scene-head .icon-btn { margin-left: auto; }
/* Bouton pressé : même vocabulaire que le rail -- couleur de marque pour « cet
   outil est actif ». */
.icon-btn[aria-pressed="true"] { color: var(--primary-hi); border-color: var(--primary); }
.pub-scene-body { padding: var(--s3); }
.pub-scene-viewport {
  aspect-ratio: 4/3; border-radius: var(--r-sm); position: relative; overflow: hidden;
  background: var(--dark-bg);
  background-image: linear-gradient(var(--vp-grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--vp-grid) 1px, transparent 1px);
  background-size: 20px 20px;
  display: flex; align-items: center; justify-content: center;
}
.report-scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.report-scene-canvas[hidden], #scenePlaceholder[hidden] { display: none; }
.pub-scene-caption { margin-top: var(--s2); font-size: var(--fs-xs); font-weight: 500; }
.pub-scene-phase { margin-top: 2px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); }
.pub-scene-hint { margin-top: var(--s3); font-size: 9px; color: var(--ink-muted); line-height: 1.5; }
/* Transport minimal : le rapport n'a pas de barre de lecture complète (la
   planche le dit : ce n'est pas le player), mais la position doit se voir. */
.scene-time { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.scene-time .icon-btn { width: 24px; height: 24px; font-size: 11px; }
.scene-time input[type=range] { flex: 1; }
.scene-time .t { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); flex: none; }

/* Pleine largeur : le rapport occupe tout ce que la scène lui laisse. Pas de
   max-width de colonne de texte -- sur un grand écran, les pastilles et les
   courbes gagnent à respirer, et la largeur du texte reste tenue par la
   présence de la scène à sa gauche. */
.pub-article { flex: 1; min-width: 0; }
.pub-masthead h2 { font-size: var(--fs-2xl); line-height: 1.2; }
.rmeta-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s3); }
.rmeta .k { color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em;
            font-size: 9px; display: block; margin-bottom: 2px; }
.rmeta .v { color: var(--ink); font-weight: 500; font-size: var(--fs-xs); }
/* Rapport issu d'un template : provenance et verrou (lot T1). */
.pub-template-note { margin: var(--s3) 0 0; padding: var(--s2) var(--s3); border-left: 3px solid var(--primary);
  background: var(--primary-soft); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.pub-sommaire { margin: var(--s4) 0 var(--s5); padding-left: var(--s3);
                border-left: 2px solid var(--border-soft); }
.pub-sommaire .lbl { font-size: 9px; font-weight: 600; text-transform: uppercase;
                     letter-spacing: .06em; color: var(--ink-muted); margin-bottom: 5px; }
.pub-sommaire a { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs);
                  color: var(--ink-2); text-decoration: none; padding: 3px 0; }
.pub-sommaire a:hover { color: var(--primary-hi); }
/* Pastille de côté -- une seule définition, deux tailles selon l'endroit.
   Gauche et droite gardent les couleurs du dock natif (décision 59). */
.side-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--border); }
.side-dot.left { background: var(--side-left, #2b7fc4); }
.side-dot.right { background: var(--side-right, #cf8b0c); }
.side-dot.split { background: linear-gradient(90deg,
                  var(--side-left, #2b7fc4) 50%, var(--side-right, #cf8b0c) 50%); }
.rsection-head .side-dot { width: 8px; height: 8px; }

/* Ligne de la liste des rapports (tiroir) -- reprise de la planche. */
.pub-reportrow {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px; border: none; border-radius: 8px; background: none;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.pub-reportrow:hover { background: var(--bg-hover); }
.pub-reportrow.current { background: var(--primary-soft); }
.pub-reportrow .th { width: 32px; height: 24px; border-radius: 5px;
                     background: var(--dark-bg); flex: none; }
.pub-reportrow .tt { display: block; font-size: var(--fs-xs); line-height: 1.3; }
.pub-reportrow.current .tt { color: var(--primary-hi); font-weight: 600; }
.pub-reportrow .st { font-size: 9px; color: var(--ink-muted); }

/* Niveaux : Section (report_groups) et Sous-section (report_sections) sont des
   EN-TETES ; la mesure (datasets) est le bloc qui porte tout. Décision 109. */
.rgroup { margin-top: var(--s5); }
.rgroup:first-of-type { margin-top: var(--s4); }
/* En-tête de Section (report_groups) : barre verticale de la couleur du titre,
   fond très léger, et toute la Section se replie depuis cette ligne. Dépliée
   par défaut -- un rapport se lit d'abord en entier. */
.rgroup-head {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-lg); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--primary-hi);
  border-left: 8px solid currentColor;
  padding: 6px 5px 6px 10px;
  /* Le `#151e2d0a` demandé EST le jeton `--bg-hover` du thème clair
     (rgba(21,30,45,.04)) : même valeur au centième près. On prend donc le jeton
     plutôt que la couleur en dur -- il vaut rgba(255,255,255,.05) en thème
     sombre, donc le voile s'inverse tout seul au lieu de disparaître. Rien de
     neuf à inventer, et les deux thèmes restent tenus par le kit. */
  background-color: var(--bg-hover);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  cursor: pointer; user-select: none;
}
.rgroup-head:hover { background-color: var(--bg-active); }
.rgroup-head:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rgroup-caret { margin-left: auto; font-size: var(--fs-sm); color: var(--ink-muted);
                transition: transform var(--dur) var(--ease); }
.rgroup-head[aria-expanded="false"] .rgroup-caret { transform: rotate(-90deg); }
.rgroup-body[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .rgroup-caret { transition: none; } }
/* ── sélecteur organisation › projet ─────────────────────────────── */
.proj-tree { max-height: 60vh; overflow: auto; min-width: 240px; }
.proj-org { font-size: 9px; font-weight: 700; text-transform: uppercase;
            letter-spacing: .06em; color: var(--ink-muted);
            padding: var(--s2) var(--s2) 4px; }
.proj-item { display: flex; align-items: center; gap: var(--s2); width: 100%;
             padding: 7px var(--s2); border: none; background: none; font: inherit;
             font-size: var(--fs-sm); color: var(--ink); text-align: left;
             border-radius: var(--r-sm); cursor: pointer; }
.proj-item:hover { background: var(--bg-hover); }
.proj-item[aria-current="true"] { background: var(--primary-soft); color: var(--primary-hi);
                                  font-weight: 600; }
.proj-item .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }
.proj-item .c { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); }
.proj-sep { height: 1px; background: var(--border-soft); margin: var(--s2) 0; }

.report-foot { margin-top: var(--s6); padding-top: var(--s4);
               border-top: 1px solid var(--border-soft); font-size: var(--fs-xs);
               color: var(--ink-muted); line-height: 1.6; }
.report-foot code { font-family: var(--font-mono); background: var(--bg-sunken);
                    padding: 1px 5px; border-radius: 5px; }

/* Destinataire d'un lien partagé : pas de panneau, pas de boutons d'auteur.
   Le mode existe dans la planche ; côté schéma il n'y a AUCUN jeton de partage
   (ports.js, trou connu) -- ?vue=destinataire sert donc à juger l'écran, pas à
   prétendre qu'un lien public existe. */

/* ── 720-1179 px : la scène passe EN HAUT, fixe ─────────────────── */
@media (max-width: 1179px) {
  .pub-content-row { flex-direction: column; gap: var(--s4); padding: var(--s4); }
  .edge-rail { top: calc(var(--s4) + 5px); }
  .pub-content-row { padding-left: calc(var(--s4) + 26px); }

  .report-doc > .sidebar:not(.is-closed) {
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 40;
    width: 236px; box-shadow: var(--shadow-lg);
  }
  .report-doc > .sidebar.is-closed { position: absolute; left: 0; top: 0; bottom: 0; }
  .pub-scene { position: sticky; top: 0; z-index: 15; width: 100%;
               border-radius: var(--r); box-shadow: var(--shadow-lg); }
  .pub-scene.collapsed { width: 100%; }
  .pub-article { max-width: none; width: 100%; }
}

/* ── 720-1179 px : la scène est un BANDEAU, pas une fiche ────────
   Épinglée en haut, elle doit rester basse : on ne garde que le temps et son
   curseur, posés DANS l'image, en bas. Titre de mesure, instant figé et
   mode d'emploi disparaissent -- ils sont déjà dans l'article qu'on lit juste
   en dessous. Le déplacement du bloc de temps est fait en JS (placeSceneTime) :
   le CSS ne sait pas sortir un élément de son parent. */
@media (min-width: 720px) and (max-width: 1179px) {
  .pub-scene-body { display: block; padding: var(--s2); }
  .pub-scene-viewport { width: 100%; max-width: none;
                        aspect-ratio: auto; height: clamp(180px, 26vh, 280px); }
  .pub-scene-meta { display: none; }
}
/* Posé dans l'image : dégradé pour que le texte clair tienne sur n'importe
   quelle scène, y compris une image claire le jour où le rendu arrivera. */
.scene-time--overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 12;
  margin: 0; padding: 10px var(--s3) 8px;
  background: linear-gradient(to bottom, transparent, rgba(21,30,45,.72));
}
.scene-time--overlay .t { color: #fff; }
.scene-time--overlay input[type=range] { accent-color: var(--primary); }

/* ── < 720 px : une chose OU l'autre ────────────────────────────── */
@media screen and (max-width: 719px) {
  .report-edit-actions { flex-wrap: wrap; padding: 6px var(--s3); }
  .report-edit-actions #editStatus { flex-basis: 100%; }
  .pub-content-row { padding: var(--s3); }
  .edge-rail { top: calc(var(--s3) + 5px); }
  .pub-content-row { padding-left: calc(var(--s3) + 26px); }
  .pub-scene-body { flex-direction: column; }
  .pub-scene-viewport { width: 100%; max-width: none; }
  .report-body.show-report .pub-scene { display: none; }
  .report-body.show-scene .pub-article { display: none; }
  .report-body.show-scene .pub-scene { position: static; }
  .rsec-media { flex-direction: column; }
  .rsec-thumb-wrap { width: 100%; }
  .rsec-thumb { width: 150px; height: 150px; }
  .rsec-chart-wrap svg { height: 150px; }
  .rsec-stats { grid-template-columns: repeat(2, 1fr); }
  .rsec-stats-split { grid-template-columns: 1fr; }
  .pub-masthead h2 { font-size: var(--fs-xl); }
}

@page {
  size: A4;
  margin: 18mm 14mm 17mm;
  @top-left {
    content: "MotionUp  /  Rapport";
    color: #5f9836;
    font: 600 8pt 'Poppins', 'Segoe UI', sans-serif;
    letter-spacing: .06em;
  }
  @bottom-right {
    content: "Page " counter(page);
    color: #4a5e48;
    font: 8pt 'Poppins', 'Segoe UI', sans-serif;
  }
}
@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --bg-sunken: #f3f5f2;
    --bg-hover: rgba(21,30,45,.04);
    --border-soft: #e6ebe4;
    --ink: #151e2d;
    --ink-2: #4a5e48;
    --ink-muted: #8a9e88;
    --primary: #78b84a;
    --primary-hi: #5f9836;
    --chart-panel: #fff;
  }
  html, body { width: auto !important; height: auto !important; background: white !important; color: #151e2d !important; }
  .report-doc, .report-workspace, .report-body, .main, .pub-content-row {
    display: block !important; height: auto !important; min-height: 0 !important;
    overflow: visible !important; padding: 0 !important; margin: 0 !important;
    background: white !important; box-shadow: none !important;
  }
  .sidebar, .report-mobile-switch, .report-edit-actions, .popover, .edge-rail, .report-confirm,
  .pub-scene, .fixture-banner, .report-delete, .rgroup-caret { display: none !important; }
  #article { display: block !important; width: 100% !important; max-width: none !important;
    overflow: visible !important; color: #151e2d !important;
    print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #article [data-edit-field] { outline: none !important; background: none !important; }
  #article [data-edit-field]:empty::before { content: none !important; }
  .rgroup-body[hidden] { display: block !important; }
  .pub-masthead h2 { font-size: 19px; line-height: 1.25; }
  .rmeta-row { margin-top: 6px; gap: 4mm 8mm; }
  .pub-sommaire { margin: 10px 0 12px; padding-left: 8px; }
  .pub-sommaire a { display: inline-flex; width: 50%; box-sizing: border-box;
    vertical-align: top; padding: 2px 8px 2px 0; font-size: 9px; line-height: 1.35; }
  .rgroup, .rgroup:first-of-type { margin-top: 13px; }
  .rgroup-head { padding: 4px 6px 4px 8px; border-left-width: 5px;
    font-size: 13px; border-radius: 0; background: #f3f5f2; }
  .rsub-head { margin: 10px 0 3px; padding-bottom: 4px; font-size: 11px; }
  .rsub-comment { margin-bottom: 5px; font-size: 10px; line-height: 1.4; }
  .rsection { padding: 9px 0; break-inside: avoid-page; }
  .rsection-head { margin-bottom: 6px; }
  .rsec-title { font-size: 12px; line-height: 1.3; }
  .rsec-media { display: flex; flex-direction: row; gap: 8px;
    margin-bottom: 6px; align-items: stretch; }
  .rsec-thumb-wrap { flex: 0 0 40mm; width: 40mm; }
  .rsec-thumb { width: 40mm; height: 40mm; padding: 0; border: 0; background: white; }
  .rsec-thumb img { width: 100%; height: 100%; object-fit: contain; }
  .rsec-media:not(:has(.rsec-thumb img)) .rsec-thumb-wrap { display: none; }
  .rsec-chart-wrap { border-radius: 4px; }
  .rsec-chart-wrap svg { height: 40mm; }
  .rsec-stats-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rsec-stats-col { gap: 3px; padding-left: 6px; border-left-width: 2px; }
  .rsec-stats-col .col-label { font-size: 9px; }
  .rsec-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .chip-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .chip { min-height: 30px; height: auto; padding: 3px 4px; border-radius: 4px; }
  .chip .k { font-size: 9px; line-height: 1.2; }
  .chip .v { font-size: 11px; line-height: 1.2; }
  .rsec-comment { margin: 6px 0 0; padding-left: 7px; font-size: 10px; line-height: 1.4; }
  .report-foot { display: none !important; }
  .rgroup-head, .rsub-head, .rsection-head { break-after: avoid-page; }
  .rsec-chart-wrap svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .rsec-chart-wrap { border: 1px solid #cbd2d7; background: #fff; }
  .rsection.is-active .rsec-thumb { border-color: transparent !important; }
  .chart-playhead, .chart-hover-line, .chart-tip, .chart-click-hint { display: none !important; }
  .pub-sommaire a, .rmeta .v, .rsection, .rsub-comment, .rsec-comment { color: #151e2d !important; }
}
/* Assistant « Créer un template » (lot T6). */
.template-assistant { width: min(560px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--bg-surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.template-assistant::backdrop { background: rgba(12,20,30,.55); }
.template-assistant h3 { margin: 0 0 8px; font-size: var(--fs-lg); }
.template-assistant p { margin: 0 0 12px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.template-assistant label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px;
  font-size: var(--fs-sm); color: var(--ink-2); }
.template-assistant input, .template-assistant select { padding: 6px 8px; border: 1px solid var(--border);
  border-radius: var(--r-field); background: var(--bg-surface); color: var(--ink); font: inherit; }
.template-assistant input:invalid { border-color: var(--danger, #d64b4b); }
.template-assistant fieldset { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--border-soft);
  border-radius: var(--r-field); }
.template-assistant legend { padding: 0 4px; font-size: var(--fs-sm); color: var(--ink); }
.template-measures { max-height: 200px; overflow-y: auto; margin-bottom: 8px; }
.template-measures .lbl { margin-bottom: 4px; color: var(--ink-muted); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .07em; }
.template-measures .tm { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 4px 0;
  border-bottom: 1px solid var(--border-soft); font-size: var(--fs-sm); }
.template-measures .tm .st { width: 16px; color: var(--primary-hi); }
.template-measures .tm.todo .st { color: var(--warn, #c98a12); }
.template-measures .tm .why { flex-basis: 100%; padding-left: 24px; color: var(--ink-muted); font-size: var(--fs-xs); }
.template-status { min-height: 1.2em; }
.template-actions { display: flex; justify-content: flex-end; gap: 8px; }
.template-assistant [hidden] { display: none !important; }
.template-measures .tm-edit { flex-basis: 100%; padding-left: 24px; display: flex; flex-direction: column; gap: 6px; }
.template-measures .tm-source { display: flex; flex-wrap: wrap; gap: 6px; }
.template-measures .tm-source select { flex: 1 1 140px; }
.template-measures .tm-key { flex-basis: 100%; margin: 0; }
.template-measures .tm-ops { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); }
.template-measures .tm-ops label { flex-direction: row; align-items: center; gap: 4px; margin: 0; }

/* Candidat de la scène (masse, taille saisies) : ses métadonnées suivent celles du rapport. */
.rmeta-candidate { display: contents; }